Static UIStatic UI Docs
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.

Badge