HTML Template with Dark Mode Toggle 2026

Q: How do I prevent dark mode flash on page load?

Place the theme-reading JS immediately after the opening ` ` tag — NOT in the footer, NOT with `defer`, NOT in an external script file. The script must run synchronously before the browser renders anything: `const t=localStorage.getItem('theme'); if(t) document.documentElement.setAttribute('data-theme',t)`. This 1-line inline script eliminates the white flash completely.

Dark Mode Toggle — Complete Code

/* ── CSS tokens ───────────────── */
:root {
  --bg: #ffffff; --text: #111827;
  --card: #f9fafb; --border: #e5e7eb;
}
:root[data-theme="dark"] {
  --bg: #06080f; --text: #f1f5f9;
  --card: #0d1117; --border: rgba(255,255,255,.07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #06080f; --text: #f1f5f9;
  }
}

/* ── Toggle button ────────────── */
.theme-toggle {
  background: none; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px;
  cursor: pointer; color: var(--text);
}

/* ── JS ───────────────────────── */
// Read saved theme or detect OS preference
const saved = localStorage.getItem('theme');
if (saved) document.documentElement
  .setAttribute('data-theme', saved);

document.querySelector('.theme-toggle')
  .addEventListener('click', () => {
    const current =
      document.documentElement.getAttribute('data-theme')
      ?? (matchMedia('(prefers-color-scheme:dark)')
      .matches ? 'dark' : 'light');
    const next = current === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    localStorage.setItem('theme', next);
});

Dark Mode Implementation Checklist

CSS custom properties in :root — never hardcode colours in component styles
:root[data-theme="dark"] overrides — JS sets this attribute, CSS responds
@media (prefers-color-scheme: dark) — default for first-time visitors with no saved preference
localStorage persistence — theme survives page navigation and browser restarts
No flash of wrong theme — put the JS immediately after the opening <body> tag (not deferred)
Images — check contrast in both themes, consider CSS filter: invert(1) for icon SVGs
aria-label on toggle button — "Switch to dark mode" / "Switch to light mode"

Why Dark Mode Matters (2026 Data)

82%

of Users Use Dark Mode Sometimes

2026 survey across 50,000 users. Dark mode preference is highest among developers (91%), designers (87%), and mobile users at night (78%).

+14%

Longer Session Time

Sites with proper dark mode report 14% average session duration increase. Users stay on pages that don't strain their eyes in low-light environments.

OLED

Battery Saving on OLED Phones

True black (#000000) pixels are off on OLED screens — a dark mode page uses 40–60% less battery than a white page. 60% of premium phones shipped in 2025 use OLED displays.

Trust

Perceived as More Professional

In developer tool and SaaS categories, dark mode is the expected default. A site without dark mode signals the product wasn't built by people who use it themselves.

Get All 180+ Templates — $35 One-Time

Commercial licence · No subscription · Instant download · Lifetime updates

Download All 180+ Templates — $35

One payment · Own the files forever · Used by 500+ agencies worldwide

Frequently Asked Questions

How do I add a dark mode toggle to HTML?

3-layer approach: 1) CSS custom properties in :root for all colours. 2) :root[data-theme='dark'] overrides the tokens. 3) 15-line JavaScript reads localStorage, falls back to prefers-color-scheme, and toggles data-theme on click while saving to localStorage. Full code in the example above. Place the JS immediately after opening body tag to prevent flash of wrong theme on reload.

How do I prevent dark mode flash on page load?

Place the theme-reading JS immediately after the opening `` tag — NOT in the footer, NOT with `defer`, NOT in an external script file. The script must run synchronously before the browser renders anything: `const t=localStorage.getItem('theme'); if(t) document.documentElement.setAttribute('data-theme',t)`. This 1-line inline script eliminates the white flash completely.

How do CSS custom properties work for dark mode?

Define all colours as CSS variables in :root: `--bg:#fff; --text:#111`. Use only variables in component styles: `body{background:var(--bg);color:var(--text)}`. To switch themes, override only the :root variables under `[data-theme='dark']` — every component inherits the new values automatically. No component-level dark mode rules needed. This is the scalable approach for any project size.

Does dark mode affect SEO?

Dark mode itself does not affect SEO ranking directly. It does affect: 1) Bounce rate — users with dark OS preference who land on a white site often leave quickly. 2) Time on page — dark mode users stay longer on comfortable pages. 3) Core Web Vitals — if dark mode implementation causes CLS (layout shift), it can hurt rankings. UIXDraft dark mode templates use CSS-only colour switching with no layout shift.

What is the best dark mode approach — CSS or JavaScript?

Best approach is CSS + JS together: CSS custom properties handle the visual switching (no JS needed for the colours themselves), JS handles: reading the saved preference from localStorage, detecting OS preference with matchMedia, toggling the data-theme attribute on user click, and saving the new preference. Pure CSS approaches using prefers-color-scheme alone don't support user override — always combine both.