Responsive Theme Generator
Generate a full light and dark mode theme from a single color.
Generated Shades
Previews
Light Mode
This is a card element.
This is an accent text.
Dark Mode
This is a card element.
This is an accent text.
:root {
--background: #e9f0fc;
--foreground: #063683;
--card: #ffffff;
--card-foreground: #063683;
--primary: #1e6ff5;
--primary-foreground: #e9f0fc;
--accent: #0a59db;
}
.dark {
--background: #063683;
--foreground: #d1e0fa;
--card: #0847af;
--card-foreground: #d1e0fa;
--primary: #629bf8;
--primary-foreground: #063683;
--accent: #6da2f8;
}