Brug JavaScript til at læse checkboxens state og toggle dark mode på <html>.
<label> <span class="visually-hidden">Theme</span> <input id="theme-toggle" type="checkbox"> </label> <section> <h1>Light/Dark mode with JavaScript</h1> <p>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!</p> </section>
const html = document.documentElement;
const toggleSwitch = document.querySelector("#theme-toggle");
function handleThemeChange(event) {
// 1. læs checkboxens state
// 2. toggle dark-klassen på html
}
toggleSwitch?.addEventListener("change", handleThemeChange);
Hints
function handleThemeChange(event) {
const isDark = toggleSwitch.checked;
html.classList.toggle("dark", isDark);
}
toggleSwitch?.addEventListener("change", handleThemeChange);