Persistindo o tema escolhido
O botão de tema já funciona, mas o navegador esquece a escolha assim que a página recarrega. Falta uma memória que sobreviva além de um único carregamento.
Estudar esta lição interativa →Volte à primeira aula deste módulo: o botão de tema já funciona, troca de claro para escuro e vice-versa. Mas experimente uma coisa (num site publicado de verdade, não aqui no ambiente de prática): escolha o tema escuro e recarregue a página. A escolha some, e a página volta para o tema claro, porque uma variável do JavaScript só existe enquanto a página está aberta. Assim que ela recarrega, tudo é recriado do zero, inclusive o estado do tema.
Pense na diferença entre lembrar de cabeça e anotar num post-it colado na porta da geladeira. Uma variável comum é a memória de cabeça: assim que você "reinicia" (fecha e reabre a página), ela se apaga. O localStorage é o post-it: mesmo que você saia de casa e volte dias depois, o bilhete continua lá, colado, esperando por você.
O localStorage é um pequeno espaço de armazenamento que o navegador reserva para cada site, e que sobrevive a recarregamentos e até a fechar e reabrir o navegador. Ele guarda pares de chave e valor, sempre como texto, com dois métodos principais: localStorage.setItem("chave", "valor") para salvar, e localStorage.getItem("chave") para ler de volta (devolve null se a chave nunca foi salva). A receita para o nosso botão de tema fica assim: ao carregar a página, lemos a preferência salva (ou usamos "claro" como padrão) e a aplicamos; a cada clique, além de trocar o tema na tela, salvamos a nova escolha.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique em Tema escuro e depois em Simular recarga: a página volta ao padrão e relê a preferência salva. A mensagem de status diz de onde veio o valor.
Cada vez que você clica em Rodar aqui na plataforma, o exemplo roda dentro de um mini-navegador isolado (por segurança), que começa do zero a cada execução. Além disso, o localStorage de verdade costuma estar bloqueado aqui. Por isso o exemplo testa se ele funciona (dentro de um try/catch) e, se não funcionar, usa uma "memória de teste" com os mesmos métodos getItem e setItem, que dura enquanto a página do exemplo estiver aberta. É para isso que serve o botão Simular recarga: ele devolve a página ao padrão e relê a preferência, mostrando o ciclo salvar e ler sem precisar recarregar de verdade. A preferência não sobrevive de um Rodar para o outro, mas isso é limitação do ambiente de treino, não do seu código: numa página publicada de verdade, o localStorage funciona exatamente como descrito.
Primeiro, repare que o valor guardado é sempre "claro" ou "escuro" (a preferência da pessoa), enquanto a classe do CSS se chama dark (o jeito de aplicar o tema); a função aplicarTema faz a tradução entre as duas. Segundo, o classList.toggle("dark", escuro) recebe um segundo argumento: com true ele liga a classe, com false desliga, sem alternar. Foi assim que a mesma função serviu tanto para o clique quanto para ler a preferência salva.