How to Add Dark Mode to Any Website (No Library, No Flash)

#react #css #webdev #javascript

Dark mode in ~15 lines, no library — and the part most tutorials skip: no white flash on load. Here's the whole pattern.

1. Colors as variables

:root{ --bg:#ffffff; --text:#1a1a1a }
[data-theme="dark"]{ --bg:#0e1116; --text:#e8ecf3 }
body{ background:var(--bg); color:var(--text) }

Never hard-code colors. Reference variables everywhere, and switching theme becomes one attribute change.

2. The toggle

const root = document.documentElement;
const next = root.getAttribute('data-theme')==='dark' ? 'light':'dark';
root.setAttribute('data-theme', next);
localStorage.setItem('theme', next);

3. Kill the flash (the bit everyone forgets)

Apply the saved theme before first paint with a tiny inline script at the top of your , before the stylesheet:

const saved = localStorage.getItem('theme');
const dark = matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.setAttribute('data-theme', saved || (dark?'dark':'light'));