Responsive Theme Generator

Generate a full light and dark mode theme from a single color.

Base 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;
}