Customising the views | laravel-comments | Spatie

 SPATIE

laravel-comments
================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-comments](https://spatie.be/docs/laravel-comments/v2)  Livewire-components  Customising the views

 Version   v2   v1

 Other versions for crawler [v2](https://spatie.be/docs/laravel-comments/v2) [v1](https://spatie.be/docs/laravel-comments/v1)

- [ Introduction ](https://spatie.be/docs/laravel-comments/v2/introduction)
- [ Getting a license ](https://spatie.be/docs/laravel-comments/v2/getting-a-license)
- [ Requirements ](https://spatie.be/docs/laravel-comments/v2/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-comments/v2/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-comments/v2/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-comments/v2/changelog)
- [ Upgrade guide ](https://spatie.be/docs/laravel-comments/v2/upgrade)
- [ About us ](https://spatie.be/docs/laravel-comments/v2/about-us)

Basic usage
-----------

- [ Working with comments ](https://spatie.be/docs/laravel-comments/v2/basic-usage/working-with-comments)
- [ Working with reactions ](https://spatie.be/docs/laravel-comments/v2/basic-usage/working-with-reactions)
- [ Transforming comments ](https://spatie.be/docs/laravel-comments/v2/basic-usage/transforming-comments)
- [ Sending notifications ](https://spatie.be/docs/laravel-comments/v2/basic-usage/sending-notifications)
- [ Approving comments ](https://spatie.be/docs/laravel-comments/v2/basic-usage/approving-comments)
- [ Listing comments in Laravel Nova ](https://spatie.be/docs/laravel-comments/v2/basic-usage/listing-comments-in-laravel-nova)

Livewire components
-------------------

- [ Introduction ](https://spatie.be/docs/laravel-comments/v2/livewire-components/introduction)
- [ Installation ](https://spatie.be/docs/laravel-comments/v2/livewire-components/installation)
- [ Using the components ](https://spatie.be/docs/laravel-comments/v2/livewire-components/using-the-components)
- [ Taking care of authorization ](https://spatie.be/docs/laravel-comments/v2/livewire-components/taking-care-of-authorization)
- [ Customising the views ](https://spatie.be/docs/laravel-comments/v2/livewire-components/customising-the-views)
- [ Mentions ](https://spatie.be/docs/laravel-comments/v2/livewire-components/mentions)
- [ Miscellaneous options ](https://spatie.be/docs/laravel-comments/v2/livewire-components/miscellaneous-options)
- [ Using Markdown ](https://spatie.be/docs/laravel-comments/v2/livewire-components/using-markdown)

 Customising the views
=====================

You can customize any of the views by publishing them. The view can be published by issuing this artisan command.

```
php artisan vendor:publish --tag="comments-views"
```

You'll find the published views in the `resources/views/vendor/comments` directory of your app.

Customizing the CSS
=================================================================================================================

The default CSS of the package is rendered by the `` component that you put in the `` of your document.
See the [installation instructions](https://spatie.be/docs/laravel-comments/v1/livewire-components/installation#content-using-the-assets).

You can of course include these styles in your own build process and tweak the contents of the CSS source file, available [on GitHub](https://github.com/spatie/laravel-comments-livewire/blob/main/resources/css/comments.css#L49) (*private repo, avaliable for licensees*).

The package uses CSS vars for the colors. A fair middleground is overriding only these variables to set a different theme.

![screenshot](/docs/laravel-comments/v1/images/dark-mode.png)

Eg. you could implement a dark theme by using the default `` and change the colors in your application CSS:

```
/* Dark colors */
.comments {
    --comments-color-background: rgb(34, 34, 34);
    --comments-color-background-nested: rgb(34, 34, 34);
    --comments-color-background-paper: rgb(55, 51, 51);
    --comments-color-background-info: rgb(104, 89, 214);

    --comments-color-reaction: rgb(59, 59, 59);
    --comments-color-reaction-hover: rgb(65, 63, 63);
    --comments-color-reacted: rgba(67, 56, 202, 0.25);
    --comments-color-reacted-hover: rgba(67, 56, 202, 0.5);

    --comments-color-border: rgb(221, 221, 221);

    --comments-color-text:white;
    --comments-color-text-dimmed: rgb(164, 164, 164);
    --comments-color-text-inverse: white;

    --comments-color-accent: rgba(67, 56, 202);
    --comments-color-accent-hover: rgba(67, 56, 202, 0.75);

    --comments-color-danger: rgb(225, 29, 72);
    --comments-color-danger-hover: rgb(225, 29, 72, 0.75);

    --comments-color-success: rgb(10, 200, 134);
    --comments-color-success-hover: rgb(10, 200, 134, 0.75);

    --comments-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
```

You might want to [set your Shiki theme](https://spatie.be/docs/laravel-comments/v1/installation-setup#content-customising-the-code-highlighting-theme) as well to fit the dark design.