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

The work is in /js/theme.js. Start by checking index.html for the button with id 'themeToggle'. Implement the functions as described: applyTheme, toggleTheme, and initThemeToggle. Test by clicking the button and reloading the page to see if the theme persists. Add the provided CSS to see the dark mode styles. Done when the toggle works and there are no console errors.

Vom Indexierungsmodell aus dem Issue-Text verfasst.