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