Primary
Soft Primary
Secondary
Soft Secondary
Success
Soft
Info
Soft
Warning
Soft
Danger
Soft
Surface
Muted
Soft Muted
Background
Customize your application's color palette using CSS variables. The theme system provides semantic color tokens for consistent styling across all components.
Color Guidelines
600 (e.g., blue-600, pink-600)100 (e.g., blue-100, pink-100) for subtle backgrounds--on-light or --on-dark based on backgroundLight Mode Colors
Text color used on dark backgrounds (primary, secondary, success, etc.)
Text color used on light backgrounds (muted, background, surface, warning)
Main brand color for primary actions and emphasis
Soft variant of primary for backgrounds and subtle emphasis
Secondary brand color for supporting elements
Soft variant of secondary for backgrounds and subtle emphasis
Subtle background color for less prominent elements
Softer variant of muted for very subtle backgrounds
Main background color for the application
Indicates successful operations and positive states
Soft variant of success for backgrounds and subtle indicators
Informational messages and neutral notifications
Soft variant of info for backgrounds and subtle indicators
Warning messages and cautionary states
Soft variant of warning for backgrounds and subtle indicators
Error states and destructive actions
Soft variant of danger for backgrounds and subtle indicators
Background color for cards and elevated surfaces
Dark Mode Colors
Dark mode secondary color
Dark mode soft secondary color
Dark mode subtle background color
Dark mode softer muted color
Dark mode main background color
Dark mode background for cards and elevated surfaces
CSS Variables Reference
| Variable | Description |
|---|---|
--on-dark | Text/icon color for use on dark backgrounds |
--on-light | Text/icon color for use on light backgrounds |
--primary | Main brand color for primary actions |
--secondary | Secondary brand color for supporting elements |
--muted | Subtle background for less prominent elements |
--background | Main application background color |
--surface | Background for cards and elevated surfaces |
--success | Success states and positive feedback |
--info | Informational messages and neutral states |
--warning | Warning messages and cautionary states |
--danger | Error states and destructive actions |
Usage Examples