Theme

Wirechat supports full theme customization, allowing you to tailor the chat interface to match the look and feel of your application. Whether you're using dark mode, light mode, or your own custom palette, Wirechat gives you the flexibility to define your own design system.

Changing the Colors

In the configuration, you can easily change the colors that are used. Wirechat ships with 6 predefined colors that are used everywhere within the framework. They are customizable as follows:

use Wirechat\Wirechat\Panel;
use Wirechat\Wirechat\Support\Color;

public function panel(Panel $panel): Panel
{
return $panel
    // ...
    ->colors([
        'primary' => Color::Blue,
        'danger' => Color::Rose,
        'gray' => Color::Gray,
        'info' => Color::Blue,
        'success' => Color::Emerald,
        'warning' => Color::Orange,
    ]);
}

The primary color is used as the main color for notifications.

Overriding the Primary Color

The most common customization is overriding the primary color, since this is the one used across Wirechat as your brand color (buttons, highlights, notification indicators, etc.).

You don’t need to redefine every color — just provide your own palette for primary, and the rest of the colors (danger, warning, success, info, gray) will continue using the global defaults.

Wirechat works best with modern color formats like oklch(), which Tailwind also uses in its official palettes. This ensures better contrast handling and consistency in both light and dark themes.

use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
return $panel
    //..
    ->colors([
        'primary' => [
            50 => 'oklch(0.985 0.002 247.839)',
            100 => 'oklch(0.971 0.013 17.38)',
            200 => 'oklch(0.936 0.032 17.717)',
            300 => 'oklch(0.885 0.062 18.334)',
            400 => 'oklch(0.808 0.114 19.571)',
            500 => 'oklch(0.704 0.191 22.216)', // main brand shade
            600 => 'oklch(0.637 0.237 25.331)',
            700 => 'oklch(0.505 0.213 27.518)',
            800 => 'oklch(0.444 0.177 26.899)',
            900 => 'oklch(0.396 0.141 25.723)',
            950 => 'oklch(0.258 0.092 26.042)',
            ],
        ]);
}