Theming

Wirechat separates color choice from color strength. Use colors() to choose the hue, then use colorTone() to choose whether primary surfaces feel soft or solid.

Change The Primary Color

Configure colors on the panel. The primary color is used for brand accents, buttons, unread indicators, and message surfaces.

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

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colors([
            'primary' => Color::Emerald,
        ]);
}

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

Choose A Color Tone

Wirechat uses ColorTone::Soft by default. Soft tone keeps outgoing messages and related surfaces lightly tinted while primary actions stay clear and readable.

If you are upgrading from an earlier 0.6x build or from a setup that expected stronger primary message surfaces, this default may change the visual weight of your chat UI.

use Wirechat\Wirechat\Enums\ColorTone;
use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colorTone(ColorTone::Soft);
}

Use ColorTone::Solid to restore the stronger primary-color treatment for those surfaces:

use Wirechat\Wirechat\Enums\ColorTone;
use Wirechat\Wirechat\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colorTone(ColorTone::Solid);
}

Combine Color And Tone

The tone works with any primary color, including custom palettes.

use Wirechat\Wirechat\Enums\ColorTone;
use Wirechat\Wirechat\Panel;
use Wirechat\Wirechat\Support\Color;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colors([
            'primary' => Color::Rose,
        ])
        ->colorTone(ColorTone::Soft);
}

For a stronger version of the same brand color:

use Wirechat\Wirechat\Enums\ColorTone;
use Wirechat\Wirechat\Panel;
use Wirechat\Wirechat\Support\Color;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colors([
            'primary' => Color::Rose,
        ])
        ->colorTone(ColorTone::Solid);
}

Custom Palettes

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