DARK MODE - Como salvar o status escura da tela ao mudar ? | Front-end

Ao criar um portfólio e aplicar o darkmode, sempre que altero para a tela escura e mudo de tela, ela acaba saindo para tela clara. Existe uma forma de salvar ?

Exemplo do meu código : HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Gisele Viviane">
    
    <link rel="stylesheet" href="/css/style.css">
    <link rel="shortcut icon" href="/igon.jpg" >

    <title>Gisele Viviane</title>
</head>
<body>
    
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600&display=swap" rel="stylesheet">
   <input id="btn" type="button">
    <label for="btn" class="mudar-tema"></label>
<header class="navegacao">
    <nav class="navegacao__menu">
        <a class="navegacao__menu__conteudo"  href="index.html">Inicio</a>
        <a class="navegacao__menu__conteudo" href="sobre-mim.html">Sobre mim</a>
       
    </nav>
</header>
<main class="apresentacao">
    <section class="apresentacao__conteudo">
    <h1 class="apresentacao__conteudo__titulo">Professora <strong>Gisele Viviane</strong></h1>
    <p class="apresentacao__conteudo__descricao">Olá! Sou Gisele Viviane. Ajudo crianças e adultos a conquistarem uma maior qualidade de vida. Vamos conversar?</p>
    <div class="apresentacao__links">
        <h2 class="apresentacao_link">Minhas redes:</h2>
        <a class="apresentacao__links__link" href="https://linkedin.com/in/rafaellaballer" target="blank">
            <img id="instagram-imagem" src="./img/linkedin.png">
            linkedin
        </a>
    <a  class="apresentacao__links__link" href="https://www.instagram.com/gisele_vivianee/" target="blank">
        <img id="instagram-imagem" src= "./img/instagram.png" alt="instagramimagem">
        instagram
    </a>
    </div>
    </section>
   <img class="foto-vivi" src="/img/perfil.jpeg" alt="Professora Gisele segurando uma criança em uma piscina">

</main>
<footer></footer>
<script src="/js/darkmode.js"></script> 
</body>
</html>

CSS> @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

:root{ --cor-primaria:#254E70; --cor-secundaria:#8EE3EF; --cor-terciaria:#37718E; --cor-quaternaria:#AEF3E7;

--fonte-primaria:  'Krona One', sans-serif;
--fonte-secundaria: 'Montserrat', sans-serif;

--label-icon:url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/lua.png");

}

*{ padding:0; margin:0; } .dark-mode { --label-icon: url("https://caelum-online-public.s3.amazonaws.com/1369-alura-mais-dark-mode/sol.png"); --cor-primaria: #0b132b; --cor-secundaria:#002d67; --cor-terciaria:#3a506b; --cor-quaternaria:#AEF3E7; } #btn-tema { position: absolute; top: 4%; margin-left: 90%; display: none; padding: 2rem; } .mudar-tema { position: absolute; top: 4%; margin-left: 90%; background-image: var(--label-icon); background-repeat: no-repeat; padding: 2rem; cursor: pointer; } h1{ font-size: 2.5rem; }

body{

box-sizing: border-box;
color: var(--cor-primaria);
background-color:var(--cor-secundaria);

} ""

Javascript:

document.querySelector("#btn").addEventListener("click", () => {
    document.body.classList.toggle("dark-mode")
})

Oii, Rodrigo. Tudo bem?

Tem como fazer isso com localStorage. Ele faz com que o estado do modo escuro seja salvo e recuperado mesmo depois da mudança de página ou recarregamento.

Cê pode fazer essas mudanças no código, deixei uns comentários, mas você pode tirar depois:

// Checamos se o modo escuro foi ativado anteriormente e aplica a classe
if (localStorage.getItem('dark-mode') === 'true') {
    document.body.classList.add('dark-mode');
}

// Adicionamos um evento ao botão para alternar entre os modos claro e escuro
document.querySelector("#btn").addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");

    // Salvamos a preferência no localStorage
    localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
});

O localStorage.getItem('dark-mode') - Vê se o modo escuro estava ativado anteriormente. Se sim, aplica a classe dark-mode ao corpo da página.

E o localStorage.setItem('dark-mode', ...) - Salva a preferência atual (modo escuro ativado ou não) no localStorage.

Se quiser se aprofundar mais, temos esse artigo: Armazenadores de dados no navegador.

Espero ter te ajudado.

Um abraço e bons estudos.

Mergulhe em programação