Static UI Docs Themes Gaming
Gaming
Vibrant neon gaming theme
Color Palette
Light Mode — :root
Background1 0 0
Foreground0.09 0.02 300
Card1 0 0
Card Foreground0.09 0.02 300
Popover1 0 0
Popover Foreground0.09 0.02 300
Primary0.623 0.265 340.32
Primary Foreground1 0 0
Secondary0.685 0.235 215.78
Secondary Foreground1 0 0
Muted0.92 0.02 300
Muted Foreground0.5 0.05 300
Accent0.685 0.235 215.78
Accent Foreground1 0 0
Destructive0.637 0.237 25.33
Destructive Foreground1 0 0
Border0.85 0.03 300
Input0.85 0.03 300
Ring0.623 0.265 340.32
Dark Mode — .dark
Background0.09 0.02 300
Foreground0.985 0.002 247.86
Card0.09 0.02 300
Card Foreground0.985 0.002 247.86
Popover0.09 0.02 300
Popover Foreground0.985 0.002 247.86
Primary0.623 0.265 340.32
Primary Foreground1 0 0
Secondary0.685 0.235 215.78
Secondary Foreground1 0 0
Muted0.2 0.04 300
Muted Foreground0.6 0.06 300
Accent0.685 0.235 215.78
Accent Foreground1 0 0
Destructive0.637 0.237 25.33
Destructive Foreground1 0 0
Border0.25 0.04 300
Input0.25 0.04 300
Ring0.685 0.235 215.78
Installation
Apply this theme to your project using the CLI:
$pnpm dlx static-ui theme gaming
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.