Theming
Customize colors, dark mode, and design tokens.
CSS variable system
shadszn/ui is themed entirely through CSS custom properties. Every color, spacing token, and visual effect is defined as a variable on the :root selector. Components reference these variables instead of hard-coded values, which means you can re-theme the entire system by changing a single CSS file.
The variables are organized into layers:
- Backgrounds --
--bg-*for solid surface colors at different elevation levels. - Glass --
--glass-*for translucent surface fills and borders. - Text --
--text-*for typography at four opacity levels. - Brand --
--brand-*for navy, lavender, and orange brand colors. - Glow --
--glow-*for box-shadow glow effects. - System --
--color-sys-*for success, warning, error, and info semantic colors.
Dark mode (default)
Dark mode is the default theme. It uses deep navy backgrounds with white-on-dark text and translucent glass surfaces. These variables are set on :root.
| Variable | Value | Description |
|---|---|---|
| --bg-deep | #0A0820 | Deepest background layer |
| --bg-base | #0D0B2E | Primary background |
| --bg-elevated | #131142 | Elevated surfaces |
| --bg-surface | #19154E | Card / panel surface |
| --glass-bg | rgba(255,255,255, 0.04) | Glass surface fill |
| --glass-bg-hover | rgba(255,255,255, 0.08) | Glass hover state |
| --glass-bg-active | rgba(255,255,255, 0.12) | Glass active/pressed state |
| --glass-border | rgba(255,255,255, 0.08) | Glass border |
| --glass-border-hover | rgba(255,255,255, 0.16) | Glass border hover |
| --glass-border-bright | rgba(255,255,255, 0.20) | Glass border focus/bright |
| --text-primary | rgba(255,255,255, 0.95) | Primary text |
| --text-secondary | rgba(255,255,255, 0.65) | Secondary text |
| --text-tertiary | rgba(255,255,255, 0.40) | Tertiary text |
| --text-muted | rgba(255,255,255, 0.25) | Muted text |
| --brand-navy | #19154E | Navy brand color |
| --brand-lavender | #E8E3FF | Lavender accent |
| --brand-orange | #FF8B4B | Orange accent |
Light mode (Springboard)
Light mode uses warm cream backgrounds with navy-on-light text. It is activated by adding the .light class to the HTML element. The next-themes package handles this automatically.
| Variable | Value | Description |
|---|---|---|
| --bg-deep | #fefcfb | Deepest background layer |
| --bg-base | #faf8f6 | Primary background |
| --bg-elevated | #f8f5f2 | Elevated surfaces |
| --bg-surface | #f3efe9 | Card / panel surface |
| --glass-bg | rgba(25,21,78, 0.03) | Glass surface fill |
| --glass-bg-hover | rgba(25,21,78, 0.05) | Glass hover state |
| --glass-bg-active | rgba(25,21,78, 0.07) | Glass active/pressed state |
| --glass-border | rgba(25,21,78, 0.10) | Glass border |
| --glass-border-hover | rgba(25,21,78, 0.16) | Glass border hover |
| --glass-border-bright | rgba(25,21,78, 0.22) | Glass border focus/bright |
| --text-primary | #19154E | Primary text |
| --text-secondary | rgba(25,21,78, 0.65) | Secondary text |
| --text-tertiary | rgba(25,21,78, 0.48) | Tertiary text |
| --text-muted | rgba(25,21,78, 0.32) | Muted text |
| --brand-lavender | #19154E | Lavender maps to navy |
| --brand-orange | #FF8B4B | Orange accent (unchanged) |
Glass morphism tokens
The glass tokens create the translucent layered effect that defines the system's visual identity. There are three levels of each token: default, hover, and bright/active.
Borders follow the same progression: --glass-border (8%), --glass-border-hover (16%), and --glass-border-bright (20%). Components use these to create subtle depth cues as users interact.
How to customize
To override any token, redefine it in your globals.css file after the theme import. All components will pick up the change automatically.
/* Override specific tokens */
:root {
--brand-lavender: #c4b5fd; /* Use a different lavender */
--brand-orange: #fb923c; /* Shift the orange warmer */
--bg-deep: #030014; /* Even darker background */
}
/* Or create an entirely new theme */
.corporate {
--bg-deep: #0f172a;
--bg-base: #1e293b;
--bg-elevated: #334155;
--bg-surface: #475569;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-bg-hover: rgba(255, 255, 255, 0.10);
--glass-bg-active: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.10);
--glass-border-hover: rgba(255, 255, 255, 0.20);
--glass-border-bright: rgba(255, 255, 255, 0.25);
--text-primary: rgba(255, 255, 255, 0.95);
--text-secondary: rgba(255, 255, 255, 0.70);
--text-tertiary: rgba(255, 255, 255, 0.45);
--text-muted: rgba(255, 255, 255, 0.30);
--brand-lavender: #818cf8;
--brand-lavender-dim: rgba(129, 140, 248, 0.15);
--brand-orange: #f97316;
--brand-orange-dim: rgba(249, 115, 22, 0.15);
}To activate a custom theme, add the class to your HTML element (e.g., <html class="corporate">) or use next-themes with a custom attribute.