Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

320
Visualizações
Why my light theme resets after page is reloaded?

As you can see I store it in localStorage, it works fine. Problem comes when I reload the page, it is reseting back to the main (dark) theme..

let lightMode = localStorage.getItem("theme")

const lightModeToggle = document.querySelector(".moon-white");

const enableLightMode = () => {
    document.body.classList.add("light-theme");

    localStorage.setItem("theme", "enabled");
};

const disableLightMode = () => {
    document.body.classList.remove("light-theme");

    localStorage.setItem("theme", null);
};

lightModeToggle.addEventListener("click", () => {
    lightMode = localStorage.getItem("theme");
    if (lightMode !== 'enabled') {
        enableLightMode();
    } else {  
        disableLightMode ();
    }
});
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

I think you're missing document.onload listener to read the current theme from localStorage and then set it to the document when it gets loaded into DOM.

let lightMode = localStorage.getItem("theme")

const lightModeToggle = document.querySelector(".moon-white");

const enableLightMode = () => {
    document.body.classList.add("light-theme");

    localStorage.setItem("theme", "enabled");
};

const disableLightMode = () => {
    document.body.classList.remove("light-theme");

    localStorage.setItem("theme", null);
};

lightModeToggle.addEventListener("click", () => {
    lightMode = localStorage.getItem("theme");
    if (lightMode !== 'enabled') {
        enableLightMode();
    } else {  
        disableLightMode();
    }
});

document.addEventListener("load", () => {
    if (lightMode === 'enabled') {
        enableLightMode();
    } else {  
        disableLightMode();
    }
});

Update: Use onload to load event!

about 4 years ago · Juan Pablo Isaza Relatório

0

It works, but instead of using document.addEventListener("onload", () =>, I used:

window.addEventListener('load', (event) => {
lightMode = localStorage.getItem("theme"); 
    if (lightMode === 'enabled') {
        enableLightMode();
    } else {  
        disableLightMode();
    }
});
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda