fireship-io / 222-responsive-icon-nav-css

A Simple Responsive Animated CSS Icon Navbar
707 stars 404 forks source link

Themeing Option Fix #10

Open alteredorange opened 4 years ago

alteredorange commented 4 years ago

Awesome menu! Everything worked great except for themes, because local storage is never set, so it's always empty. If you check for local storage first, then set it to a default, it works like champ:

const themeMap = {
    dark: "light",
    light: "solar",
    solar: "dark"
};

if (localStorage.theme) {
    const theme = localStorage.getItem("theme");
    const bodyClass = document.body.classList;
    theme && bodyClass.add(theme);
    function toggleTheme() {
        const current = localStorage.getItem("theme");
        const next = themeMap[current];

        bodyClass.replace(current, next);
        localStorage.setItem("theme", next);
    }
} else {
    localStorage.setItem("theme", "light");
}

document.getElementById("themeButton").onclick = toggleTheme;

Thanks for the great videos!

mohammadr09 commented 2 years ago

There is nothing wrong with the theme.js file. To use it, all you need to do is after the tag, create another tag, and link the theme.js file there.