Theme Generator
Enter one brand color to generate a complete light and dark mode color system, ready to export.
Quick presets:
Generated Palette
Live Preview
Light Mode
Dashboard Card
This is a sample card component showing how your theme looks on surface elements with text content.
user@example.com
SuccessWarningErrorInfo
Dark Mode
Dashboard Card
This is a sample card component showing how your theme looks on surface elements with text content.
user@example.com
SuccessWarningErrorInfo
Export Code
css
:root {
/* Brand Colors */
--color-primary: #3b82f6;
--color-primary-light: #7cb1ff;
--color-primary-dark: #0056c2;
--color-secondary: #270bf4;
--color-accent: #db9f3e;
--color-success: #22C55E;
--color-warning: #F59E0B;
--color-error: #EF4444;
--color-info: #a9c8ee;
/* Light Mode (default) */
--color-background: #FFFFFF;
--color-surface: #F8FAFC;
--color-text-primary: #0F172A;
--color-text-secondary: #475569;
--color-border: #E2E8F0;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: #0F172A;
--color-surface: #1E293B;
--color-text-primary: #F8FAFC;
--color-text-secondary: #94A3B8;
--color-border: #334155;
}
}
[data-theme="dark"] {
--color-background: #0F172A;
--color-surface: #1E293B;
--color-text-primary: #F8FAFC;
--color-text-secondary: #94A3B8;
--color-border: #334155;
}