CodingNic

Dark Mode and Final Features

Persist the Theme Preference

Dark Mode and Final Features 6 min read

Persist the Theme Preference

Store the user’s theme preference in localStorage so the choice survives a refresh.

Save the preference when the toggle changes:

javascript
localStorage.setItem(
  "todo-theme",
  darkModeToggle.checked ? "dark" : "light"
);

Then restore it when the application starts:

javascript
const savedTheme = localStorage.getItem("todo-theme");
const isDark = savedTheme === "dark";

darkModeToggle.checked = isDark;
document.documentElement.classList.toggle("dark", isDark);

Checkpoint

Turn on dark mode, refresh the page, and confirm that the same theme is still selected.