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:
localStorage.setItem(
"todo-theme",
darkModeToggle.checked ? "dark" : "light"
);
Then restore it when the application starts:
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.