Theming

Every component reads CSS custom properties prefixed --bwo-*. Override them anywhere in your stylesheet (on :root, a wrapper, or a specific component) to re-skin the entire library.

Quick override

/* app/globals.css */
:root {
  --bwo-accent: #7463ff;          /* swap red for purple */
  --bwo-radius-pill: 6px;         /* boxier buttons */
  --bwo-font-sans: 'Geist', sans-serif;
}

Dark mode

Toggle by adding the class boo-dark on <html>. The CSS ships dark-mode overrides for every component. For SSR, set the class before paint via an inline script that reads from localStorage (see the ThemeToggle source for the no-flash snippet).

// In a <script> tag inside <head>:
(function () {
  try {
    var t = localStorage.getItem('bwo-theme');
    if (!t) {
      t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    if (t === 'dark') document.documentElement.classList.add('boo-dark');
  } catch (e) {}
})();

Tokens

These are all the values you can override. Click any swatch to copy its name to the clipboard.

Neutrals

Accents

Radii

Shadows

Fonts

Per-instance theming

Because tokens are inherited, you can scope a different theme to any subtree by writing the variables on a wrapper element:

<div style={{ ['--bwo-accent']: '#a0ff27' } as React.CSSProperties}>
  <Button variant="primary">Green-accent button</Button>
</div>

Mapping to your own design system

If you already have a token system (Geist, Tailwind, etc.), bridge the two with var(--your-token):

:root {
  --bwo-accent: var(--brand-primary);
  --bwo-radius-md: var(--radius-lg);
  --bwo-font-sans: var(--font-body);
}