Theme Generator
Create perfectly balanced light and dark themes with calculated contrasts. Export ready-to-use CSS and Tailwind configurations.
The generator uses advanced color mixing to create harmonious light and dark themes based on your primary brand color. The resulting backgrounds and surfaces are subtly tinted to match.
Light Theme
Surface Component
Muted text for secondary information.
Elevated Component
Used for dropdowns, modals, or floating elements.
Contrast Checks
Dark Theme
Surface Component
Muted text for secondary information.
Elevated Component
Used for dropdowns, modals, or floating elements.
Contrast Checks
:root, .light {
--theme-background: #FDFEFF;
--theme-surface: #F9FBFF;
--theme-elevated: #F5F9FF;
--theme-border: #E2ECFE;
--theme-text: #091425;
--theme-muted: #204887;
--theme-primary: #3b82f6;
}
.dark {
--theme-background: #13223E;
--theme-surface: #21324E;
--theme-elevated: #344865;
--theme-border: #455C7E;
--theme-text: #E5EEFB;
--theme-muted: #829CC4;
--theme-primary: #3b82f6;
}Creating Harmonious Themes
Building a dark mode is more complicated than just inverting your light mode colors. A truly cohesive theme requires intentional color mixing and careful contrast management.
The Tinting Strategy
Notice how high-quality apps like Discord, Linear, or Stripe don't use stark grays. Their neutral colors (backgrounds, borders, text) are slightly tinted with their brand colors. This generator applies that exact mathematical approach:
- Light Mode: Mixes pure white with 1-5% of your primary color for backgrounds.
- Dark Mode: Mixes deep slate colors with 10-20% of your primary color.
Contrast Validation
Every generated theme is automatically checked against WCAG (Web Content Accessibility Guidelines) requirements. The preview panels show real-time pass/fail indicators so you can be confident your interface will be readable by everyone.