Tokens and themes · Sapphire UI

Semantic tokens are the shared contract for CSS, React and native HTML. Foundations load fonts, tokens, base styles and layout primitives once.

Theme scopes

Set data-theme="light" or data-theme="dark" on the document or a section. Omit it to follow the system preference; .dark also forces dark.

The same semantic tokens choose a readable surface and foreground.

The same semantic tokens choose a readable surface and foreground.

Override colours on every theme scope so nested sections keep your theme. Using only :root does not override a section that declares its own theme.

:root, [data-theme="light"], [data-theme="dark"], .dark {
  --brand: light-dark(#c5a065, #c5a065);
}