The Paper New Analysis Light And Dark Theme

this is the code for changing the theme

this is the style css in the base template

        :root {
            --bg: #ffffff;
            --text: #111111;
            --nav-bg: #f2f2f2;
            --accent: #ff9800;
            --table-alt: #f5f5f5;
            --border: #ccc;
        }

        body.dark {
            --bg: #1e1e1e;
            --text: #f0f0f0;
            --nav-bg: #2c2c2c;
            --accent: #ff9800;
            --table-alt: #292929;
            --border: #444;
        }

This bit grabs the button by its id

const btn = document.getElementById("themeToggle");

const saved = localStorage.getItem("theme");
if (saved === "dark" || (!saved && window.matchMedia(...).matches)) {
    document.body.classList.add("dark");
    btn.textContent = "☀️";
}

Each click flips the “dark” class in <body>

btn.onclick = () => {
    document.body.classList.toggle("dark");
    const isDark = document.body.classList.contains("dark");
    btn.textContent = isDark ? "☀️" : "🌙";
    localStorage.setItem("theme", isDark ? "dark" : "light");
};