Theming

1use herogpui::theme::{ThemeProvider, ActiveTheme};

Every color in HeroGPUI is a semantic token resolved from the active Theme. Base values are OKLCH, and derived values mix them in Oklab with fixed weights, so overriding one token moves everything derived from it.

The ActiveTheme trait reaches the tokens from any GPUI context — &App, &mut App, Context<T> (they all deref): cx.colors() for the palette, cx.role(Color::Accent) for a role, cx.layout() for the layout tokens.

1fn my_view(cx: &App) -> impl IntoElement {
2    let primary = cx.role(Color::Accent);
3    div().bg(primary.color).text_color(primary.foreground)
4}

Base tokens

Nine base tokens feed the rest of the palette. The system uses semantic tokens instead of numbered scales.

Containers

Layered surfaces, one step at a time away from the page: surface for components that sit inline, overlay for the ones that float.

Four more are derived on ThemeColors with the stylesheet's weights:

• background_secondary() — color-mix(in oklab, var(--background) 96%, var(--foreground) 4%)
• background_tertiary() — … 92% / 8%
• background_inverse() — var(--foreground)
• separator_secondary() / separator_tertiary() — var(--surface) mixed 85/15, then 81/19, toward var(--surface-foreground)

Roles

Five semantic roles cover neutral, accent and status colors: default, accent, success, warning and danger. Each RoleColor carries a base value and readable foreground; its other shades derive from the stylesheet's color-mix weights.

These are the values and methods a RoleColor derives:

1let accent = cx.role(Color::Accent);
2
3accent.color             // --accent
4accent.foreground        // --accent-foreground
5accent.hover()           // color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%)
6accent.soft()            // color-mix(in oklab, var(--accent) 15%, transparent)
7accent.soft_hover()      // color-mix(in oklab, var(--accent) 20%, transparent)
8accent.soft_foreground(cx.colors().foreground)
9                         // color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%)

The token helpers are just these fields and methods, so any view paints with the same vocabulary the components use:

1div().bg(cx.colors().surface.background)
2div().bg(cx.colors().accent.soft())
3div().text_color(cx.colors().muted)

Fields

Form-field tokens are kept separate from buttons so inputs can be styled independently. field.hover() mixes the background 90/2 toward its foreground (the weights are the stylesheet's, normalised by CSS), and field.focus() is var(--field-background) — the ring and border do the pointing.

Layout tokens

Layout uses one --radius base with calculated steps and component-semantic shadows. Read these values through cx.layout().