Local Storage Theme - JavaScript Client

A saved theme preference is read from localStorage, applied to the document, and written back when the user chooses dark mode.

Program

localStorage persists simple string values between page visits. Client JavaScript commonly uses it for preferences that should survive reloads.

local_storage_theme.html

<button id="toggle">Use dark theme</button>
<main id="panel" class="panel">Theme: light</main>
<script>
  const panel = document.querySelector("#panel");
  const toggle = document.querySelector("#toggle");
  const savedTheme = localStorage.getItem("theme") || "light";
  panel.dataset.theme = savedTheme;
  toggle.addEventListener("click", () => {
    panel.dataset.theme = "dark";
    localStorage.setItem("theme", "dark");
    panel.textContent = "Theme: dark";
  });
</script>

localStorage localStorage stores string key/value pairs that survive browser reloads.

data attributes dataset values give CSS and JavaScript a shared place to store element state.