Static UIStatic UI Docs
Docs Themes Green

Green

Default

Fresh and clean green 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.527 0.154 150.07
Primary Foreground1 0 0
Secondary0.966 0.022 144.65
Secondary Foreground0.304 0.062 152.85
Muted0.966 0.022 144.65
Muted Foreground0.556 0.034 152.85
Accent0.966 0.022 144.65
Accent Foreground0.304 0.062 152.85
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.922 0.018 144.65
Input0.922 0.018 144.65
Ring0.527 0.154 150.07

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.527 0.154 150.07
Primary Foreground1 0 0
Secondary0.268 0.054 152.85
Secondary Foreground0.985 0.002 247.86
Muted0.268 0.054 152.85
Muted Foreground0.708 0.034 152.85
Accent0.268 0.054 152.85
Accent Foreground0.985 0.002 247.86
Destructive0.577 0.245 27.33
Destructive Foreground1 0 0
Border0.268 0.054 152.85
Input0.268 0.054 152.85
Ring0.527 0.154 150.07

Installation

Apply this theme to your project using the CLI:

$pnpm dlx static-ui theme green

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