Dark Mode and Final Features
7 min read
Add the Dark Mode Toggle
Find the prepared dark-mode control in index.html and connect it in script.js.
Use the class or attribute expected by the provided stylesheet to switch the page theme. For example, if the prepared CSS uses a dark class on the document root:
const darkModeToggle = document.getElementById("dark-mode-toggle");
darkModeToggle.addEventListener("change", () => {
document.documentElement.classList.toggle(
"dark",
darkModeToggle.checked
);
});
Use the exact ID and theme hook from the starter project if they differ from this example.
Checkpoint
Toggle dark mode and confirm that the prepared dark theme appears without rewriting the CSS.