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.

Badge