Implementar um Modo Escuro que não “pisca” ao carregar a página e que lembra a escolha do usuário é um dos maiores diferenciais de um desenvolvedor Front-end atencioso. Neste guia, vamos construir essa funcionalidade do zero, separando as responsabilidades de estilo e lógica.

1. O HTML (A Estrutura)

Usamos uma estrutura simples. O segredo aqui é o id, que servirá de âncora para o nosso script.

HTML

<div class="theme-container">
  <button id="theme-toggle" class="theme-btn" aria-label="Alternar tema">
    <span class="icon-sun">☀️</span>
    <span class="icon-moon">🌙</span>
  </button>
  <h1>Geek Codes</h1>
  <p>O conteúdo que você ama, no brilho que você prefere.</p>
</div>

2. O CSS (A Inteligência das Variáveis)

Aqui está o erro que muitos cometem: não usar variáveis. Com variáveis, você altera o tema do site inteiro mudando apenas uma linha no body.

CSS

/* 1. Definição das Variáveis (Cores) */
:root {
  --bg-body: #ffffff;
  --text-main: #1a1a1a;
  --btn-bg: #eeeeee;
  --transition: 0.4s;
}

/* 2. Cores do Modo Escuro */
body.dark-mode {
  --bg-body: #0f172a;
  --text-main: #f1f5f9;
  --btn-bg: #1e293b;
}

/* 3. Aplicação nos Elementos */
body {
  background-color: var(--bg-body);
  color: var(--text-main);
  transition: background-color var(--transition), color var(--transition);
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.theme-btn {
  background-color: var(--btn-bg);
  border: 2px solid var(--text-main);
  color: var(--text-main);
  padding: 10px 20px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1.2rem;
  transition: var(--transition);
}

3. O JavaScript (A Lógica e a Memória)

Este script verifica a escolha salva no navegador assim que a página abre.

JavaScript

// Selecionamos o botão e o corpo da página
const btn = document.querySelector('#theme-toggle');
const body = document.body;

// PASSO 1: Ao carregar, verifica se existe algo salvo no LocalStorage
const savedTheme = localStorage.getItem('geek-theme');

// Se estiver salvo como 'dark', aplica a classe imediatamente
if (savedTheme === 'dark') {
  body.classList.add('dark-mode');
}

// PASSO 2: Ouve o clique do botão
btn.addEventListener('click', () => {
  // Alterna a classe (se tem, tira; se não tem, coloca)
  body.classList.toggle('dark-mode');
  
  // PASSO 3: Salva a nova preferência
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('geek-theme', 'dark');
  } else {
    localStorage.setItem('geek-theme', 'light');
  }
});

📝 Por que este código está correto?

1. Separação de Preocupações: O CSS cuida do visual, o JS cuida da lógica.
2. Performance: O uso de classList.toggle é mais rápido que condicionais longas.
3. Experiência do Usuário (UX): O localStorage evita que o usuário tenha que clicar no botão toda vez que mudar de aba no site.