Adding Dark Mode

Dark mode is now expected by users. Building it with CSS custom properties makes it trivial.

CSS-only approach (prefers-color-scheme)

:root {
    --bg:   #ffffff;
    --text: #0d1b2a;
    --card: #f4f6f8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:   #0d1b2a;
        --text: #e2e8f0;
        --card: #1e293b;
    }
}

JS toggle (user can override system preference)

// Toggle
function toggleTheme() {
    const isDark = document.body.classList.toggle("dark");
    localStorage.setItem("theme", isDark ? "dark" : "light");
}

// Remember preference on load
const saved = localStorage.getItem("theme");
if (saved === "dark" || (!saved && window.matchMedia("(prefers-color-scheme:dark)").matches)) {
    document.body.classList.add("dark");
}

CSS for the toggle

body { background: var(--bg); color: var(--text); transition: background .3s, color .3s; }
body.dark { --bg: #0d1b2a; --text: #e2e8f0; }