Remember the Theme

The theme control and its styles already exist. Add the missing state logic without touching the CSS.

1. Define the storage key

const THEME_KEY = "securegen-theme";

2. Centralize theme application

function applyTheme(isDark) {
  document.body.classList.toggle("dark-mode", isDark);
}

3. Toggle and save

Use the existing themeToggle:

themeToggle.addEventListener("click", () => {
  const isDark = !document.body.classList.contains("dark-mode");
  applyTheme(isDark);
  localStorage.setItem(THEME_KEY, isDark ? "dark" : "light");
});

4. Restore on startup

applyTheme(localStorage.getItem(THEME_KEY) === "dark");

Test

Switch themes, reload, and switch again. Confirm the selected state survives the reload and does not affect password generation.

Checkpoint

Theme state is controlled by JavaScript and persisted locally while the prepared CSS remains unchanged.