Theming

DAVE uses a two-layer token system. Primitive variables hold raw values. Semantic aliases give them meaning. You theme by overriding primitives — semantics update automatically.

Swap the accent colour

The accent scale controls buttons, focus rings, links, badges, and any interactive element. Override it in your global CSS, after the token import:

CSS

/* globals.css */
@import '@haydywoo/dave-tokens/dist/tokens.css';
 
:root {
  --accent-1:  #fef3c7;
  --accent-2:  #fde68a;
  --accent-3:  #fcd34d;
  --accent-4:  #fbbf24;
  --accent-5:  #f59e0b;
  --accent-6:  #d97706;
  --accent-7:  #b45309;
  --accent-8:  #92400e;
  --accent-9:  #d97706;   /* solid — buttons, focus rings */
  --accent-10: #b45309;   /* hover */
  --accent-11: #92400e;   /* text on tinted backgrounds */
  --accent-12: #78350f;   /* high-contrast text */
}

Steps 1–8 fill the subtle tints used for bg-accent-subtle and borders. Steps 9–12 are the four you'll most often need to tune.

Override a single semantic

If you only need to change one specific use — say, card backgrounds — you can override the semantic directly without touching the primitive scale:

CSS

:root {
  --color-card: #ffffff;
  --color-border: var(--neutral-5);
}

See the Tokens page for the full primitive and semantic reference.

Dark mode

DAVE ships a full dark palette under a .dark class. Put the class on <html> — for example with next-themes using attribute="class" — and every semantic token switches over:

TSX

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>

The class must sit on <html>: semantic aliases are resolved at the root, so a .dark wrapper further down the tree won't re-theme its children.

To customise dark mode, override primitives inside .dark, the same way you would for light:

CSS

.dark {
  --accent-9:  oklch(55% 0.20 265);   /* solid */
  --accent-10: oklch(60% 0.20 265);   /* hover */
}

Border radius

Radii are fixed in the components rather than tokenised: 3px on controls (buttons, inputs, badges, tags) and 6px on surfaces (cards, popovers, dialogs). They can't currently be themed from CSS — to change an individual instance, pass a className such as rounded-[8px].

What not to override

The neutral, success, warning, and error scales carry semantic meaning that should stay consistent across products. Override the accent scale for brand colour. Override semantic aliases for one-off adjustments. Leave the rest alone.

PreviousIntroduction NextColours