Theming

How tokens work#

templates/vibeui.css declares each token twice: once for light (on :root and .light) and once for dark (on .dark). A @theme inline block then registers them with Tailwind, so they become normal utilities: bg-surface, text-muted, border-line, ring-ring, shadow-lift.

:root,
.light { --surface: #ffffff; }
.dark  { --surface: #181715; }

@theme inline { --color-surface: var(--surface); }
/* → bg-surface, text-surface, border-surface, … */

Because the utilities resolve to var(--surface) at runtime, you can override a token on any element and its subtree changes. That is how the landing page's playground retints live components, and how you can scope a dark panel inside a light page.

Color tokens#

These are read straight from the token file, so the table is always current.

Reading the palette

Retint the accent#

Both themes are monochrome by default: light mode's accent is the ink itself, dark mode's accent is the light ink. Override both after the token import. Keep --accent-ink readable on top of --accent: it is the text color for accent buttons, checked boxes and selected days.

:root {
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --accent-soft: rgb(37 99 235 / 0.1);
  --ring: rgb(37 99 235 / 0.28);
}

.dark {
  --accent: #7aa7ff;
  --accent-ink: #06142e;
  --accent-soft: rgb(122 167 255 / 0.14);
  --ring: rgb(122 167 255 / 0.3);
}

Radii#

Want sharper corners? Set the four values smaller (for example 4, 6, 8, 12). Want pills? Raise them. The interactive version of this is on the home page.

:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
}

Shadows#

Depth is a hairline plus a soft layered shadow, never a heavy drop shadow. Four tokens cover it.

Typography#

Each falls back to a system stack when its variable is not set, so nothing breaks without fonts. To use your own typefaces, point the variables at them:

:root {
  --font-geist-sans: "Inter";
  --font-instrument: "Fraunces";
}

Add your own tokens#

Add the variable for both themes, then register it so Tailwind generates a utility:

:root  { --success-surface: #e9f3ea; }
.dark  { --success-surface: #223127; }

@theme inline {
  --color-success-surface: var(--success-surface);
}
/* now: bg-success-surface */

Scoping a theme#

Put class="dark" or class="light" on any element and everything inside renders in that palette, regardless of the page. Useful for a dark hero on a light page, an embedded preview, or a theme switcher that shows both at once.

<section className="dark rounded-xl bg-canvas p-8 text-ink">
  <Button>Always dark</Button>
</section>