CSSAWWWARDS
+ Submit tool
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:
NameLightDark

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

How to use

01

Edit your tokens

Start from the default set (background, surface, border, text, muted, accent) or add your own.

02

Set light & dark values

Pick a color for each token in both modes using the swatches.

03

Preview both modes

Toggle Light/Dark to see a real card styled with your generated variables.

04

Copy the CSS

Get the :root block, the prefers-color-scheme override, and the manual toggle JS.