Static UI Docs Themes Green
Green
DefaultFresh and clean green accent theme
Color Palette
Light Mode — :root
Background1 0 0
Foreground0.13 0.028 261.69
Card1 0 0
Card Foreground0.13 0.028 261.69
Popover1 0 0
Popover Foreground0.13 0.028 261.69
Primary0.527 0.154 150.07
Primary Foreground1 0 0
Secondary0.966 0.022 144.65
Secondary Foreground0.304 0.062 152.85
Muted0.966 0.022 144.65
Muted Foreground0.556 0.034 152.85
Accent0.966 0.022 144.65
Accent Foreground0.304 0.062 152.85
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.922 0.018 144.65
Input0.922 0.018 144.65
Ring0.527 0.154 150.07
Dark Mode — .dark
Background0.13 0.028 261.69
Foreground0.985 0.002 247.86
Card0.13 0.028 261.69
Card Foreground0.985 0.002 247.86
Popover0.13 0.028 261.69
Popover Foreground0.985 0.002 247.86
Primary0.527 0.154 150.07
Primary Foreground1 0 0
Secondary0.268 0.054 152.85
Secondary Foreground0.985 0.002 247.86
Muted0.268 0.054 152.85
Muted Foreground0.708 0.034 152.85
Accent0.268 0.054 152.85
Accent Foreground0.985 0.002 247.86
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.268 0.054 152.85
Input0.268 0.054 152.85
Ring0.527 0.154 150.07
Installation
Apply this theme to your project using the CLI:
$pnpm dlx static-ui theme green
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.