Dark Mode in 12 Lines of CSS (No Library, No Framework)

Mamad Mirza — Wed, 04 Nov 2026 14:38:07 +0000

Most dark-mode tutorials reach for a library or a theme provider. You don't need one. CSS variables already do the whole job: define your colours once, swap the values when a toggle flips, and let every element follow.

Here is the complete theme from a working demo page I built:

:root{
  --bg:#ffffff;
  --text:#16202e;
  --card:#eef2f7;
  --accent:#c9a227;
}
body.dark{
  --bg:#0b1220;
  --text:#f5f0e1;
  --card:#16223a;
  --accent:#e7c34a;
}

That's the theme itself. Everything else on the page just uses the variables:

body{
  background:var(--bg);
  color:var(--text);
  transition:background .3s, color .3s;
}
.card{ background:var(--card); }
button{ background:var(--accent); }

The toggle

One button, one class on <body>, and localStorage so the visitor's choice survives the next visit:

const b = document.body;
if (localStorage.getItem('demo-theme') === 'dark') b.classList.add('dark');

document.getElementById('t').onclick = () => {
  b.classList.toggle('dark');
  localStorage.setItem('demo-theme', b.classList.contains('dark') ? 'dark' : 'light');
};

Why this works so well

One source of truth. Backgrounds, text, cards and buttons all read the same few variables, so the dark theme can't drift out of sync with the light one.
No flash of the wrong theme is handled by applying the saved class before the page settles — the check runs immediately.
Zero dependencies. Nothing to install, nothing to break on the next framework update. It works in a static HTML file, a WordPress theme, or inside any framework's stylesheet.

Dark mode isn't just a trend — visitors stay longer on pages that are easy on their eyes at night. With variables, adding it is an afternoon's small change, not a project.

I'm Mamad Mirza, a full-stack developer in the UK. I build a small working project every day — follow along here, or work with me on LaborX.

DEV Community: Mamad Mirza

Dark Mode in 12 Lines of CSS (No Library, No Framework)

The toggle

Why this works so well