CodingNic

Dark Mode and Final Features

Add the Dark Mode Toggle

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:

javascript
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.