Como Implementar Dark Mode em Sites com CSS e JavaScript

05/11/2024

O Dark Mode (Modo Escuro) tornou-se uma tendência popular em design de interfaces, proporcionando uma experiência visualmente agradável, especialmente em ambientes com pouca luz. Além de reduzir a fadiga ocular, o modo escuro pode economizar energia em dispositivos com telas OLED. Neste guia, vamos aprender a implementar o Dark Mode em seu site usando CSS e JavaScript de forma simples e eficaz.

Por Que Adicionar Dark Mode ao Seu Site?

Melhor Experiência do Usuário: Oferece aos visitantes a opção de escolher o esquema de cores que preferem.
Acessibilidade: Ajuda pessoas sensíveis à luz brilhante ou com deficiências visuais.
Estilo Moderno: Mantém seu site alinhado com as tendências atuais de design.

Abordagens para Implementar o Dark Mode

Existem várias maneiras de adicionar o modo escuro ao seu site:

CSS Puro com Media Query: Utilizando prefers-color-scheme para detectar a preferência do sistema.
CSS Variables (Custom Properties): Facilitando a troca de temas ao alterar valores de variáveis.
JavaScript para Alternância Manual: Permitindo que o usuário alterne entre modos claro e escuro.

Neste guia, focaremos na implementação com CSS Variables e JavaScript, incluindo a opção de salvar a preferência do usuário.

Passo a Passo: Implementando o Dark Mode

1. Configurando a Estrutura HTML

Crie um botão para alternar entre os modos:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Dark Mode Exemplo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Bem-vindo ao Meu Site</h1>
    <button id="toggle-theme">Alternar Tema</button>
  </header>
  <main>
    <p>Este é um exemplo de como implementar o Dark Mode.</p>
  </main>
  <script src="script.js"></script>
</body>
</html>

2. Definindo as Variáveis CSS

No arquivo styles.css, defina as variáveis para cores:

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

/* Estilos Globais */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

3. Criando o Tema Escuro

Adicione uma classe .dark-mode com as novas cores:

.dark-mode {
  --background-color: #121212;
  --text-color: #ffffff;
}

4. Implementando o JavaScript para Alternância

No arquivo script.js, escreva o código para alternar entre os temas:

const toggleThemeButton = document.getElementById('toggle-theme');
const bodyElement = document.body;

// Verifica se há preferência salva
if (localStorage.getItem('theme') === 'dark') {
  bodyElement.classList.add('dark-mode');
}

toggleThemeButton.addEventListener('click', () => {
  bodyElement.classList.toggle('dark-mode');

  // Salva a preferência do usuário
  if (bodyElement.classList.contains('dark-mode')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

5. Detectando Preferência do Sistema (Opcional)

Você pode ajustar o tema automaticamente com base na preferência do usuário:

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
  }
}

E ajuste o JavaScript para priorizar a preferência salva:

// Apenas aplica preferência do sistema se não houver preferência salva
if (!localStorage.getItem('theme')) {
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    bodyElement.classList.add('dark-mode');
  }
}

6. Estilizando o Botão de Alternância

Melhore a aparência do botão:

#toggle-theme {
  background-color: transparent;
  border: 2px solid var(--text-color);
  color: var(--text-color);
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#toggle-theme:hover {
  background-color: var(--text-color);
  color: var(--background-color);
}

7. Testando a Implementação

Verifique a Alternância: Clique no botão para alternar entre os temas.
Salvamento de Preferência: Recarregue a página para garantir que a preferência foi salva.
Preferência do Sistema: Altere o tema do seu sistema operacional para testar a detecção automática.

Dicas Avançadas

Personalizando Mais Elementos

Expanda o uso de variáveis para outros aspectos:

:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --link-color: #1a0dab;
}

.dark-mode {
  --background-color: #121212;
  --text-color: #ffffff;
  --link-color: #8ab4f8;
}

a {
  color: var(--link-color);
}

Animações Suaves

Adicione transições para uma troca de tema mais suave:

body {
  transition: background-color 0.5s ease, color 0.5s ease;
}

Ícone de Alternância de Tema

Substitua o texto do botão por um ícone:

<button id="toggle-theme">
  <img src="sun-icon.svg" alt="Alternar Tema">
</button>

E ajuste o JavaScript para mudar o ícone conforme o tema.

Considerações de Acessibilidade

Contraste Adequado: Certifique-se de que as cores escolhidas atendam aos padrões de contraste para legibilidade.
Indicação Clara: O botão de alternância deve ser facilmente identificável.
Persistência de Preferência: Salvar a preferência do usuário melhora a experiência em visitas futuras.

Conclusão

Implementar o Dark Mode em seu site é uma forma eficaz de melhorar a experiência do usuário e manter-se atualizado com as tendências atuais de design. Com o uso de CSS Variables e JavaScript, você pode oferecer aos visitantes a opção de escolher o tema que preferem, tornando seu site mais acessível e atraente.