Modo escuro para o teu site · Programa com Martin

Um interruptor de tema claro/escuro que o site lembra mesmo depois de fechares o browser.

Como vai funcionar

O modo escuro é um feitiço de duas partes:

CSS prepara um segundo «fato» – regras que só se aplicam quando a página tem a classe dark.
JavaScript adiciona ou remove essa classe ao clicar. E escreve o que escolheste na memória do browser, para continuar amanhã.

Vou mostrar-te: o fato escuro em CSS

Adiciona isto ao fim de style.css:

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2 {
  color: #93c5fd;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
}

Lê assim: «Quando body tem a classe dark, estas regras aplicam-se.» Sem a classe, nada disto é usado.

💡

Ajusta as cores ao teu site – percorre o teu CSS e inventa uma versão escura para cada cor clara. A regra mantém-se: fundo escuro → texto claro.

Vou mostrar-te: o interruptor em JavaScript

Adiciona um botão ao cabeçalho (dentro de <nav>):

<button id="switch">🌙</button>

E em script.js:

const switchButton = document.getElementById("switch");

// When the page loads: remember what the visitor picked last time
if (localStorage.getItem("mode") === "dark") {
  document.body.classList.add("dark");
  switchButton.textContent = "☀️";
}

switchButton.addEventListener("click", () => {
  document.body.classList.toggle("dark");

  if (document.body.classList.contains("dark")) {
    localStorage.setItem("mode", "dark");
    switchButton.textContent = "☀️";
  } else {
    localStorage.setItem("mode", "light");
    switchButton.textContent = "🌙";
  }
});

Três coisas novas:

classList.toggle("dark") – «se tem a classe, remove; se não tem, adiciona.» Um interruptor numa linha.
classList.contains("dark") – «tem agora?» (devolve verdadeiro/falso, útil numa condição).
localStorage – o caderno do browser. setItem escreve, getItem lê. O que guardas aí sobrevive mesmo a fechar o browser. (De facto, este próprio site usa-o para guardar o teu progresso enquanto aprendes!)

Agora és tu 💪

Adiciona um fato escuro ao teu style.css – percorre todas as tuas cores (fundo, cabeçalho, cartões, rodapé, distintivos) e dá-lhes versões escuras sob body.dark.
Adiciona um botão de interruptor ao cabeçalho em cada página e o código a script.js.
Experimenta: muda para escuro, fecha o browser, abre o site outra vez – deve abrir direto em modo escuro.

Exemplo de fato escuro mais completo (ajusta as cores ao teu projeto)

body.dark {
  background-color: #1c1917;
  color: #f5f0ea;
}

body.dark h1,
body.dark h2,
body.dark h3 {
  color: #93c5fd;
}

body.dark header {
  background-color: #0f172a;
}

body.dark .card {
  background-color: #292524;
  color: #f5f0ea;
  box-shadow: none;
}

body.dark footer {
  background-color: #0f172a;
}

body.dark a {
  color: #93c5fd;
}

✅

Verifica tu: Clicar em 🌙 escurece o site (e o ícone muda para ☀️), clicar em ☀️ clareia outra vez. Depois de fechar e reabrir o browser, o site lembra a tua escolha. Esta é uma funcionalidade que muitos sites «de adultos» nem têm!

O que ficas a saber desta lição

Modo escuro = um fato CSS preparado (body.dark) + JavaScript que alterna a classe.
classList.toggle() adiciona/remove uma classe, classList.contains() verifica se existe.
localStorage é a memória permanente do browser: setItem("key", "value") e getItem("key").