CSS Pixels
Explore Tools
Home/Tools/CSS/Theme Generator
CSS · Generator

Theme Generator

Create complete color themes with dark mode support.

Light Theme Colors

Preview

Sample Card

This is how your theme will look with the selected colors.

SuccessErrorAccent
Generated CSS
:root {
  /* Light Theme */
  --color-primary: #6366f1;
  --color-secondary: #8b5cf6;
  --color-accent: #ec4899;
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #1e293b;
  --color-textMuted: #64748b;
  --color-border: #e2e8f0;
  --color-success: #22c55e;
  --color-error: #ef4444;
}

[data-theme="dark"],
.dark {
  /* Dark Theme */
  --color-primary: #818cf8;
  --color-secondary: #a78bfa;
  --color-accent: #f472b6;
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-text: #f1f5f9;
  --color-textMuted: #94a3b8;
  --color-border: #334155;
  --color-success: #4ade80;
  --color-error: #f87171;
}

/* Usage */
.element {
  background-color: var(--color-background);
  color: var(--color-text);
  border-color: var(--color-border);
}

.button-primary {
  background-color: var(--color-primary);
  color: white;
}
100%
Free, no
sign-up needed
0
Code written
by hand
85+
CSS tools
in one place
<1s
Copy-ready
CSS instantly
What is this

What is the CSS Theme Generator?

Generate a light and dark mode CSS theme using custom properties. One toggle to switch between themes without page reload.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Theme Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

1

Set your light theme colours

Enter background, surface, text, secondary text, border, and primary colours for the light mode.

2

Configure dark equivalents

The generator suggests dark mode equivalents by inverting lightness values. Adjust the suggestions to match your design.

3

Copy both :root and [data-theme] blocks

Paste into your global CSS. Add data-theme="dark" to the HTML element to activate dark mode.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

theme.css
:root {
  --bg: #ffffff;
  --bg-surface: #f5f5f7;
  --text: #1d1d1f;
  --text-secondary: #86868b;
  --border: #e5e7eb;
  --primary: #0071e3;
}

[data-theme="dark"] {
  --bg: #000000;
  --bg-surface: #1c1c1e;
  --text: #f5f5f7;
  --text-secondary: #98989d;
  --border: #38383a;
  --primary: #2997ff;
}

Switching themes is a single JavaScript line: document.documentElement.setAttribute("data-theme", "dark"). No CSS class toggling, no style recalculation beyond the custom property cascade.

Pro tips

Pro tips for better results

★

Respect the OS preference with prefers-color-scheme

Add @media (prefers-color-scheme: dark) { :root { /* dark values */ } } as the default for users who have not toggled manually. Override with [data-theme] when the user makes a choice.

★

Persist theme preference in localStorage

Store the user's theme choice: localStorage.setItem("theme", "dark"). Read it on page load before first render to prevent a flash of the wrong theme.

FAQ

Frequently asked questions

Set the data-theme attribute with an inline script in <head> before the body renders: document.documentElement.setAttribute("data-theme", localStorage.getItem("theme") || "light"). Inline scripts block rendering and run before any CSS is applied.
Yes. Add [data-theme="high-contrast"], [data-theme="sepia"], or any other selector. Each block overrides the :root custom properties for its named theme.

From the blog

Read more →
Guides

Modern CSS techniques every developer should know

A practical tour of the CSS features that replaced yesterday’s hacks.

7 min read·Guides
Workflow

From design to code without the friction

How visual generators speed up the build without sacrificing clean output.

5 min read·Workflow
Fundamentals

Writing CSS that scales with your project

Tokens, naming, and structure that keep large stylesheets maintainable.

6 min read·Fundamentals