Customizing
Lux is token-driven. Override CSS custom properties in :root — the entire system reacts.
Brand color
The single most impactful override. Set --brand and buttons, badges, focus rings, links, and progress bars all update instantly.
Live
New
<style>
:root {
--brand: #6366f1; /* indigo — default */
--brand-fg: #ffffff; /* text on brand bg */
--brand-hover: #4f46e5; /* darker on hover */
}
</style>
Full token reference
Surfaces
| Token | Light | Dark | Used for |
|---|---|---|---|
--bg | #ffffff | #09090b | Page background |
--bg-subtle | #fafafa | #111113 | Card, sidebar |
--bg-muted | #f4f4f5 | #18181b | Hover, input bg |
--bg-overlay | rgba(255,255,255,0.85) | rgba(9,9,11,0.85) | Nav blur, glass |
Text
| Token | Light | Dark | Used for |
|---|---|---|---|
--text | #09090b | #fafafa | Headings, strong |
--text-muted | #52525b | #a1a1aa | Body, labels |
--text-subtle | #a1a1aa | #52525b | Placeholder, meta |
Borders
| Token | Used for |
|---|---|
--border | Cards, inputs, dividers |
--border-subtle | Table rows, faint dividers |
--border-strong | Checkbox border, strong dividers |
Radius
| Token | Value | Used for |
|---|---|---|
--r-sm | 3px | Badges, small elements |
--r | 6px | Buttons, inputs |
--r-lg | 10px | Cards, dropdowns |
--r-xl | 16px | Dialogs, sheets |
--r-full | 9999px | Badges (pill), switch |
Dark mode
Lux uses light-dark() — it auto-follows prefers-color-scheme. No class toggling needed.
To force a specific mode, set color-scheme on the root:
/* Force dark */
:root { color-scheme: dark; }
/* Force light */
:root { color-scheme: light; }
/* Toggle via JS */
document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
Typography
Override the font stack with any variable font:
:root {
--font-sans: 'Geist', -apple-system, sans-serif;
--font-mono: 'Geist Mono', monospace;
}
Per-component overrides
Components use the same tokens. To override a specific component, use a more specific selector:
/* Make all buttons slightly rounder */
button, .btn { border-radius: var(--r-full); }
/* Custom brand button with gradient */
button[data-variant="brand"] {
background: linear-gradient(135deg, #6366f1, #06b6d4);
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}
/* Sharper cards */
.card { border-radius: var(--r); }
Cherry-picking components
For absolute minimum bundle size, import only what you need from the source CSS:
/* Your build tool (PostCSS, Vite, etc.) */
@import '@suryanandx/lux/src/css/00-base.css';
@import '@suryanandx/lux/src/css/01-theme.css';
@import '@suryanandx/lux/src/css/button.css';
@import '@suryanandx/lux/src/css/form.css';
/* … only what you use */