Theming
Customize Storm UI with CSS variables. Change colors, radius, and spacing while preserving the structural identity.
How Theming Works
Storm UI uses CSS custom properties (variables) for all visual tokens. Override them in your CSS to create a custom theme. The structural identity (border, no shadows, rounded corners) stays consistent. Values are space-separated RGB channels to enable Tailwind opacity modifiers.
1/* globals.css - override any token */2/* Values are space-separated RGB channels */3:root {4 --storm-primary: 37 99 235; /* Blue instead of lime */5 --storm-primary-foreground: 255 255 255;6 --storm-radius-lg: 16px; /* Rounder corners */7}89.dark {10 --storm-primary: 96 165 250;11 --storm-background: 15 23 42; /* Slate dark bg */12}Theme Builder
Pick a preset or customize individual tokens. Preview components in real-time and export the CSS overrides.
Presets
Token Editor
Core
Brand
Status
UI
Preview
Card using storm-border and storm-background tokens.
Themed Alert
Colors adapt automatically to your token overrides.All Design Tokens
| Token | Light | Dark | Usage |
|---|---|---|---|
| --storm-background | #FAFAFA | #09090B | Page background |
| --storm-foreground | #18181B | #FAFAFA | Primary text |
| --storm-foreground-subtle | #52525B | #A1A1AA | Secondary text |
| --storm-primary | #84CC16 | #A3E635 | Brand color (lime) |
| --storm-primary-foreground | #052E16 | #052E16 | Text on primary |
| --storm-secondary | #F0FDF4 | #0C1A0A | Secondary surfaces |
| --storm-secondary-foreground | #365314 | #BEF264 | Text on secondary |
| --storm-accent | #A855F7 | #C084FC | Accent color (purple) |
| --storm-accent-foreground | #FFFFFF | #FFFFFF | Text on accent |
| --storm-destructive | #EF4444 | #F87171 | Error / danger |
| --storm-success | #22C55E | #4ADE80 | Success state |
| --storm-success-foreground | #052E16 | #052E16 | Text on success |
| --storm-warning | #F59E0B | #FBBF24 | Warning state |
| --storm-warning-foreground | #451A03 | #451A03 | Text on warning |
| --storm-info | #3B82F6 | #60A5FA | Info state |
| --storm-info-foreground | #FFFFFF | #FFFFFF | Text on info |
| --storm-muted | #F4F4F5 | #18181B | Muted backgrounds |
| --storm-muted-foreground | #71717A | #A1A1AA | Muted text |
| --storm-border | #E4E4E7 | #27272A | Border color |
| --storm-ring | #84CC16 | #A3E635 | Focus ring |
Live Components
These components use the current theme tokens. Toggle dark mode with the button in the header to see them adapt.
Themed Alert
Colors adapt automatically to your token overrides.Card using storm-border and storm-background tokens.
Structural Identity
Storm's identity comes from structure, not color: border, no shadows, consistent radius. Change any color and Storm still looks like Storm.