ZeroServer.tools

CSS Dark Mode Generator

Generate CSS custom properties and a JavaScript toggle for a complete light/dark mode theme system.

Preset

Light mode

Background

Surface

Text

Text Muted

Primary

Border

Dark mode

Background

Surface

Text

Text Muted

Primary

Border

:root {
  --color-bg: #ffffff;
  --color-surface: #f3f4f6;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-primary: #4f46e5;
  --color-border: #e5e7eb;
}

[data-theme="dark"],
.dark {
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-primary: #818cf8;
  --color-border: #334155;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-primary: #818cf8;
    --color-border: #334155;
  }
}

/* Usage */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

How CSS custom properties enable dark mode

CSS custom properties (variables) are the cleanest approach to dark mode — define all colors once in :root and override them in a [data-theme="dark"] selector. The prefers-color-scheme media query auto-applies dark colors for system-preference users, while the localStorage-backed JS toggle respects explicit user overrides.

Private & free — this tool runs entirely in your browser.