JavaScript dark mode toggle that remembers the user’s choice

JavaScript Dasun Kalupahana October 14, 2026 97 views

const root = document.documentElement;
const saved = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

root.dataset.theme = saved ?? (prefersDark ? 'dark' : 'light');

document.querySelector('#theme-toggle')?.addEventListener('click', () => {
  const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
  root.dataset.theme = next;
  localStorage.setItem('theme', next);
});

Uses the system preference on the first visit, then saves the user’s choice in localStorage. It sets a data-theme attribute you can style in CSS.

#javascript #dark-mode #localstorage #prefers-color-scheme #css