Theming

Wirechat exposes panel colors for the chat UI states that usually need to match an application brand: primary actions, danger states, neutral grays, information, success, and warning.

Changing the Colors

Configure colors on the panel. Wirechat ships six predefined color groups:

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 for the main brand treatment and notification accents.

Overriding the Primary Color

The most common customization is overriding primary, because it appears on buttons, highlights, and notification indicators.

You can define only primary; the other colors continue using their defaults.

Wirechat accepts modern color formats such as oklch(), matching the format Tailwind uses in its official palettes.

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)',
            ],
        ]);
}