Colors

Nothing in PanelUI names a colour. A Button does not know it is dark grey; it knows it is primary, and what primary resolves to is decided by the active theme. That indirection is the whole reason a theme switch restyles the library rather than only the screens you wrote.

So there is one rule, and it applies to your own code as much as to ours: use the semantic token, not the palette value. bg-primary, not bg-neutral-800. The moment a raw value appears, that element stops following the theme and starts being a bug someone finds in dark mode.

The tokens

Most come in pairs — a surface and the text that goes on it. foreground is always the readable colour for the token it is named after, so bg-card text-card-foreground is guaranteed to have contrast in every theme.

Surfaces

overlay is one step further forward than popover, and it exists because a menu is usually the thing on top of a popover. Without a step of its own it disappears into whatever it opened over.

Elevation

A ladder rather than one value, so nesting reads as hierarchy. This describes depth within the page; overlay describes leaving it.

Actions and state

Status

destructive, info, success and warning, each with a -foreground, a -soft and a -subtle.

The tints are real tokens rather than opacity modifiers, and that is not an accident. dark: only resolves inside the light and dark themes — inside a named theme it compiles to a class selector that never matches, so a dark:bg-info/[0.06] tint silently vanishes the moment someone switches to Moon. See Theming for why.

Charts

chart-1 through chart-5, ordered by prominence. A separate ramp from the status colours because they answer a different question: a status colour means something — this failed, this is fine — while a series colour only has to be told apart from the other four.

chart-1 is the series the chart is about, and every theme starts it on that family's own accent. LineChart takes chart-1 by default and each further series takes the next, so putting every chart in an app on brand is five lines in your global.css.

Syntax

code-keyword, code-string, code-number, code-comment, code-function, code-property, code-punctuation, code-inserted and code-deleted — the highlighting ramp CodeBlock and Response draw from.

Changing a colour

Redefine the token in your own global.css, in the same @variant shape the library uses:

@import 'panelui-native/theme.css';

@layer theme {
  :root {
    @variant light {
      --color-primary: #4f46e5;
      --color-primary-foreground: #ffffff;
    }
    @variant dark {
      --color-primary: #818cf8;
      --color-primary-foreground: #1e1b4b;
    }
  }
}

Every component drawing bg-primary follows, including ones you have not written yet.

If you are overriding for all six themes rather than two, the same block takes moon, moon-dark, grass and grass-dark alongside light and dark.

Reading a colour in JavaScript

Some things cannot be given a class: an SVG fill, a placeholderTextColor, a prop on a third-party component. Resolve the token instead of hardcoding what it currently evaluates to:

import { useCSSVariable } from 'uniwind';

const muted = useCSSVariable('--color-muted-foreground');

<Svg><Circle fill={muted} /></Svg>

It subscribes to theme changes, so the value updates on every switch — which a hex literal copied out of this page would not. Icons inside PanelUI's own coloured surfaces already do this for you; see Button for how startContent icons pick up a readable colour.

Next