Built-in toolFree · No signup

CSS Variables Theme Builder

Define a set of named color tokens with a light and a dark value for each, see them applied live to a preview card, and get a complete theme-switching CSS block: a :root default, an automatic @media (prefers-color-scheme: dark) override, and an optional [data-theme] block with a JS toggle function for manual switching that overrides the OS preference.

Share on X LinkedIn

Tokens (6)

NameLightDark

Output optionsAuto-switch with OS preference (prefers-color-scheme)Allow manual override ([data-theme] + JS toggle)

Live preview

Theme preview card

This card is styled entirely with your generated custom properties.

Accent button

CSS Output

:root {  --color-bg: #ffffff;  --color-surface: #f8f7f4;  --color-border: #e5e5e5;  --color-text: #111111;  --color-muted: #666666;  --color-accent: #1d9e75;} @media (prefers-color-scheme: dark) {  :root {    --color-bg: #111110;    --color-surface: #1a1a19;    --color-border: #2a2a2a;    --color-text: #f0f0f0;    --color-muted: #888888;    --color-accent: #34d399;  }} /* Manual override — set via JS, takes priority over the OS preference above */[data-theme="dark"] {  --color-bg: #111110;  --color-surface: #1a1a19;  --color-border: #2a2a2a;  --color-text: #f0f0f0;  --color-muted: #888888;  --color-accent: #34d399;} [data-theme="light"] {  --color-bg: #ffffff;  --color-surface: #f8f7f4;  --color-border: #e5e5e5;  --color-text: #111111;  --color-muted: #666666;  --color-accent: #1d9e75;} /* Toggle from JS */function toggleTheme() {  const html = document.documentElement;  const next = html.dataset.theme === "dark" ? "light" : "dark";  html.dataset.theme = next;  localStorage.setItem("theme", next);}