Static UI Docs Themes Blue
Blue
Professional blue 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.546 0.245 262.88
Primary Foreground1 0 0
Secondary0.946 0.054 262.88
Secondary Foreground0.278 0.069 262.88
Muted0.946 0.054 262.88
Muted Foreground0.556 0.04 262.88
Accent0.946 0.054 262.88
Accent Foreground0.278 0.069 262.88
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.922 0.022 262.88
Input0.922 0.022 262.88
Ring0.546 0.245 262.88
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.546 0.245 262.88
Primary Foreground1 0 0
Secondary0.278 0.069 262.88
Secondary Foreground0.985 0.002 247.86
Muted0.278 0.069 262.88
Muted Foreground0.708 0.04 262.88
Accent0.278 0.069 262.88
Accent Foreground0.985 0.002 247.86
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.278 0.069 262.88
Input0.278 0.069 262.88
Ring0.546 0.245 262.88
Installation
Apply this theme to your project using the CLI:
$pnpm dlx static-ui theme blue
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.