Skip to content

Theming

Panel color palettes, brand name, logo, favicon, and layout.

Streams UI themes a panel by registering color palettes and sharing them as CSS variables. There is no site-wide theme switcher in Core. streams/data/themes.json in this docs site is leftover data; nothing in Core or UI reads it.

Colors

Panel::boot() registers the panel's colors and shares --{name}-{shade} variables with the panel layout. The layout writes them on :root.

Defaults, from ColorManager::getColors(), before you set any:

Name Palette
danger Color::Red
gray Color::Zinc
info Color::Blue
primary Color::Amber
success Color::Green
warning Color::Amber

Each palette is shades 50 through 950. The values are r, g, b strings (for example 245, 158, 11), not full rgb() functions.

Override a name with a hex string or an rgb() string. Color::hex() and Color::rgb() generate the shade map from that color. Or pass the shade map yourself:

use Streams\Ui\Builders\Panels\Panel;
use Streams\Ui\Colors\Color;
use Streams\Ui\Support\Facades\UI;

UI::panel(
    Panel::make('admin')
        ->path('admin')
        ->colors([
            'primary' => '#1d4ed8',
            'gray' => Color::Slate,
        ])
);

colors() merges by name. Names you omit keep the defaults. A hex string has to start with #. An rgb() string has to start with rgb.

Color::all() lists the built-in palette names: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose.

Brand and favicon

Panel::make('admin')
    ->brandName('Acme')
    ->brandLogo(asset('img/logo.svg'))
    ->favicon(asset('favicon.png'));

getBrandName() falls back to config('app.name'). The panel layout's head prints the favicon only when getFavicon() returns a value. Pass a root-absolute or fully qualified URL; a relative path breaks on nested admin URLs.

Layout

->layout('ui::layouts.app') is the default. The view is a Blade view name, not a file path. Replace it when the panel should render inside your own shell. Color variables are shared with every view, but only a layout that prints $cssVariables (as ui::layouts.partials.head does) will emit them.

Generated admins

Components generated by php artisan streams:livewire are not panels and don't use these settings. Their styling is the Tailwind classes in the generated Blade views, which you own. See the command reference.

Related