Build Dark Mode Toggle (js/theme.js)

Goal

Add a Dark Mode button that lets users switch between light and dark themes — and remember their preference even after reloading.

File Ownership

You fully own:
/js/theme.js

You handle:

Adding the toggle functionality

Updating the DOM styles using classes

Saving the mode in localStorage

Learning Concepts

DOM element selection

classList.toggle()

localStorage usage

Event handling (click)

⚙️ Functional Requirements
1. HTML Element

There’s (or will be) a button in index.html:

🌙 Toggle Dark Mode

You’ll attach logic to it.

2. Create Main Functions
a) applyTheme(theme)

Applies the theme class to the body.

function applyTheme(theme) {
const body = document.body;
if (theme === "dark") {
body.classList.add("dark-mode");
} else {
body.classList.remove("dark-mode");
}
}

b) toggleTheme()

Switches between light and dark.

function toggleTheme() {
const currentTheme = localStorage.getItem("theme") || "light";
const newTheme = currentTheme === "light" ? "dark" : "light";
localStorage.setItem("theme", newTheme);
applyTheme(newTheme);
}

c) initThemeToggle()

Runs when the app loads — it applies the saved theme and sets up the click listener.

function initThemeToggle() {
const savedTheme = localStorage.getItem("theme") || "light";
applyTheme(savedTheme);

const button = document.getElementById("themeToggle");
button.addEventListener("click", toggleTheme);
}

3. Export the Function
export { initThemeToggle };

4. Integration Example

In app.js:

import { initThemeToggle } from "./theme.js";

initThemeToggle();

5. Add Some Basic CSS (for testing)
.dark-mode {
background-color: #121212;
color: #ffffff;
}

Definition of Done

Clicking the toggle switches between light/dark smoothly

The theme choice stays after page reload

All logic is cleanly inside theme.js

No console errors

Optional

Change button icon dynamically (🌙 → ☀️)

Add a small animation or fade transition on theme switch