Static UI Docs Themes Cyberpunk
Cyberpunk
Bold cyberpunk dystopian theme
Color Palette
Light Mode — :root
Background1 0 0
Foreground0.07 0.04 280
Card1 0 0
Card Foreground0.07 0.04 280
Popover1 0 0
Popover Foreground0.07 0.04 280
Primary0.905 0.22 116.35
Primary Foreground0.07 0.04 280
Secondary0.6 0.27 230
Secondary Foreground1 0 0
Muted0.9 0.04 280
Muted Foreground0.5 0.06 280
Accent0.6 0.27 230
Accent Foreground1 0 0
Destructive0.637 0.237 25.33
Destructive Foreground1 0 0
Border0.8 0.06 280
Input0.8 0.06 280
Ring0.905 0.22 116.35
Dark Mode — .dark
Background0.07 0.04 280
Foreground0.985 0.002 247.86
Card0.07 0.04 280
Card Foreground0.985 0.002 247.86
Popover0.07 0.04 280
Popover Foreground0.985 0.002 247.86
Primary0.905 0.22 116.35
Primary Foreground0.07 0.04 280
Secondary0.6 0.27 230
Secondary Foreground1 0 0
Muted0.15 0.06 280
Muted Foreground0.6 0.08 280
Accent0.6 0.27 230
Accent Foreground1 0 0
Destructive0.637 0.237 25.33
Destructive Foreground1 0 0
Border0.2 0.08 280
Input0.2 0.08 280
Ring0.905 0.22 116.35
Installation
Apply this theme to your project using the CLI:
$pnpm dlx static-ui theme cyberpunk
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.