Dark mode 5: Hent det gemte tema

Opgavebeskrivelse

Læs temaet fra localStorage, så brugeren møder det samme theme igen næste gang siden åbner.

const html = document.documentElement;
const toggleSwitch = document.querySelector("#theme-toggle");

function handleThemeChange(event) {
  const isDark = toggleSwitch.checked;
  html.classList.toggle("dark", isDark);
  localStorage.setItem("isDarkMode", isDark);
}

function getSavedTheme() {
  // 1. hent det gemte theme
  
  // 2. sync dark-klassen på html
  
  // 3. sync checkboxens checked-state
  
}

getSavedTheme();

toggleSwitch?.addEventListener("change", handleThemeChange);
Preview

Hints

function getSavedTheme() {
  const isDark = localStorage.getItem("isDarkMode") === "true";
  html.classList.toggle("dark", isDark);
  toggleSwitch.checked = isDark;
}

getSavedTheme();

Kopier øvelse

Kopiér den aktuelle CSS og JavaScript til dit eget projekt.

CSS

JavaScript

Light/Dark mode with JavaScript

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, dignissimos. Consectetur, suscipit delectus eos officia maiores, est, assumenda earum corporis nisi exercitationem tempore corrupti odit. Incidunt mollitia tenetur ratione ipsa explicabo sit eligendi voluptatum aspernatur! Accusantium incidunt necessitatibus nihil!