Static UI Docs Themes Modern
Modern
Sleek modern teal theme
Color Palette
Light Mode — :root
Background1 0 0
Foreground0.13 0.02 240
Card1 0 0
Card Foreground0.13 0.02 240
Popover1 0 0
Popover Foreground0.13 0.02 240
Primary0.6 0.18 195
Primary Foreground1 0 0
Secondary0.96 0.02 195
Secondary Foreground0.25 0.04 195
Muted0.96 0.02 195
Muted Foreground0.55 0.03 195
Accent0.96 0.02 195
Accent Foreground0.25 0.04 195
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.92 0.02 195
Input0.92 0.02 195
Ring0.6 0.18 195
Dark Mode — .dark
Background0.13 0.02 240
Foreground0.985 0.002 247.86
Card0.13 0.02 240
Card Foreground0.985 0.002 247.86
Popover0.13 0.02 240
Popover Foreground0.985 0.002 247.86
Primary0.6 0.18 195
Primary Foreground1 0 0
Secondary0.22 0.04 195
Secondary Foreground0.985 0.002 247.86
Muted0.22 0.04 195
Muted Foreground0.65 0.04 195
Accent0.22 0.04 195
Accent Foreground0.985 0.002 247.86
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.22 0.04 195
Input0.22 0.04 195
Ring0.6 0.18 195
Installation
Apply this theme to your project using the CLI:
$pnpm dlx static-ui theme modern
Installation Instructions
1. Run the CLI command above to generate the theme CSS file in your project.
2. Import the generated CSS file in your globals.css or layout file.
3. The theme variables will override the default palette for both :root (light) and .dark (dark) modes.
4. Components using bg-primary, text-foreground, and other themed utilities will automatically reflect the new colors.
Live Preview
Sample Card
This card uses the theme's CSS variables for its colors.