Static UI Docs Themes Zinc
Zinc
Neutral and minimal zinc theme
Color Palette
Light Mode — :root
Background1 0 0
Foreground0.141 0.005 285.82
Card1 0 0
Card Foreground0.141 0.005 285.82
Popover1 0 0
Popover Foreground0.141 0.005 285.82
Primary0.141 0.005 285.82
Primary Foreground1 0 0
Secondary0.967 0.001 286.38
Secondary Foreground0.21 0.006 285.88
Muted0.967 0.001 286.38
Muted Foreground0.552 0.016 285.94
Accent0.967 0.001 286.38
Accent Foreground0.21 0.006 285.88
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.92 0.004 286.32
Input0.92 0.004 286.32
Ring0.141 0.005 285.82
Dark Mode — .dark
Background0.141 0.005 285.82
Foreground0.985 0 0
Card0.141 0.005 285.82
Card Foreground0.985 0 0
Popover0.141 0.005 285.82
Popover Foreground0.985 0 0
Primary1 0 0
Primary Foreground0.141 0.005 285.82
Secondary0.274 0.006 286.03
Secondary Foreground0.985 0 0
Muted0.274 0.006 286.03
Muted Foreground0.705 0.015 286.07
Accent0.274 0.006 286.03
Accent Foreground0.985 0 0
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.274 0.006 286.03
Input0.274 0.006 286.03
Ring0.871 0.006 286.29
Installation
Apply this theme to your project using the CLI:
$pnpm dlx static-ui theme zinc
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.