Salvar escolha do tema

Parte da seção JavaScript in Action do Journey de HTML da Coddy — lição 17 de 27.

Quando os usuários alternam entre os temas claro e escuro, queremos que o site lembre-se de sua escolha.
Para isso, usamos <strong>localStorage</strong> no JavaScript. Ele armazena dados no navegador, e esses dados permanecem mesmo após a página ser atualizada ou o navegador ser fechado.

A lógica é:

Quando o usuário alternar o tema, salve o tema atual no localStorage.
Quando a página carregar, verifique o localStorage e aplique o tema salvo automaticamente.

HTML:

<button id="themeToggle">Toggle Theme</button>

CSS:

body.dark-mode {
  background-color: #222;
  color: #fff;
}

Este código verifica se o usuário salvou anteriormente um tema escuro no localStorage e o aplica quando a página é carregada.

Quando o botão é clicado, ele alterna o modo escuro na página e, em seguida, atualiza o localStorage para que a preferência seja lembrada na próxima visita

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

// Aplica o tema salvo ao carregar a página
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
}

button.addEventListener("click", function () {
  document.body.classList.toggle("dark-mode");

  // Salva a preferência
  if (document.body.classList.contains("dark-mode")) {
    localStorage.setItem("theme", "dark");
  } else {
    localStorage.setItem("theme", "light");
  }
});

Isso garante que a preferência do usuário seja mantida em todas as visitas ao seu site.

Desafio

Fácil

Crie um alternador de tema que lembre a preferência do usuário.

Passos:

Ao carregar a página: Verifique se o usuário selecionou anteriormente o modo escuro
1. Se "dark" estiver salvo no localStorage, adicione a classe "dark-mode" ao body
Quando o botão de alternância for clicado: Alterne entre os temas claro e escuro
1. Alterne a classe "dark-mode" no elemento body
2. Salve o tema atual no localStorage

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <title>Theme Preference Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="themeToggle">Toggle Theme</button>

  <h1>Saving Theme Preference</h1>
  <p>
    Try switching between light and dark mode using the button above.  
    Refresh the page — your choice is remembered thanks to <strong>localStorage</strong>.
  </p>
  <script src="script.js"></script>
</body>
</html>