Static UI Docs Themes Slate
Slate
Cool gray slate theme
Color Palette
Light Mode — :root
Background1 0 0
Foreground0.129 0.042 264.7
Card1 0 0
Card Foreground0.129 0.042 264.7
Popover1 0 0
Popover Foreground0.129 0.042 264.7
Primary0.129 0.042 264.7
Primary Foreground1 0 0
Secondary0.968 0.007 264.5
Secondary Foreground0.208 0.042 265.76
Muted0.968 0.007 264.5
Muted Foreground0.554 0.046 257.42
Accent0.968 0.007 264.5
Accent Foreground0.208 0.042 265.76
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.929 0.013 255.51
Input0.929 0.013 255.51
Ring0.129 0.042 264.7
Dark Mode — .dark
Background0.129 0.042 264.7
Foreground0.984 0.003 247.86
Card0.129 0.042 264.7
Card Foreground0.984 0.003 247.86
Popover0.129 0.042 264.7
Popover Foreground0.984 0.003 247.86
Primary1 0 0
Primary Foreground0.129 0.042 264.7
Secondary0.279 0.041 260.03
Secondary Foreground0.984 0.003 247.86
Muted0.279 0.041 260.03
Muted Foreground0.704 0.04 256.79
Accent0.279 0.041 260.03
Accent Foreground0.984 0.003 247.86
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.279 0.041 260.03
Input0.279 0.041 260.03
Ring0.871 0.006 286.29
Installation
Apply this theme to your project using the CLI:
$pnpm dlx static-ui theme slate
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.