19.03.2025

Alternando Entre Modos Escuro e Padrão no CSS

Resposta Rápida

@media (prefers-color-scheme: dark) {
  body {
    /* No geral, eu gosto de temas escuros, mas vamos escolher um fundo branco */
    background: #ffffff;
    color: #000000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    /* Alguém pediu um tema claro? */
    background: #000000;
    color: #ffffff;
  }
}

É isso! Nós substituímos o comportamento de prefers-color-scheme, então agora o site exibe um tema claro para aqueles que preferem o escuro, e vice-versa. Parece que seu site desenvolveu vida própria, não é?

Solução Principal - Salvando Preferências do Usuário

Para tarefas mais complexas, podemos salvar a escolha do usuário. Graças ao local storage, você tem uma ferramenta conveniente para gerenciar temas de acordo com as preferências do usuário:

// Olá, JavaScript, lembra da minha escolha, porque eu posso mudar de ideia
localStorage.setItem('themePreference', 'dark');

// Meu futuro eu agradece por essa previsão
const themePreference = localStorage.getItem('themePreference');

Gerenciamento do Usuário - Alternando Temas com JavaScript

Agora vamos usar JavaScript para alternar suavemente entre os temas. Determine as preferências do usuário, alterne entre os temas e aplique soluções compatíveis com todos os navegadores:

const toggleThemeBtn = document.getElementById('theme-toggle');

// Você sabe, nós podemos mudar as leis do universo, certo?
toggleThemeBtn.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');
  const newTheme = document.body.classList.contains('dark-theme') ? 'dark' : 'light';
  localStorage.setItem('themePreference', newTheme);
  // Olha, mãe, estou mudando a realidade. Eu disse que poderia fazer isso!
  document.documentElement.setAttribute('data-theme', newTheme);
});

Plano B — Garantindo Compatibilidade

Alguns elementos podem ser problemáticos (aqui está um exemplo - Microsoft Edge!). Felizmente, temos soluções alternativas usando JavaScript adicional:

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  // Edge, você não se encaixa! Adeus
  document.documentElement.setAttribute('data-theme', 'default');
}

Visualização

Quando foi a última vez que você quis acender a luz em um dia ensolarado? Ou mergulhar na escuridão para um pouco de aconchego? É aqui que a substituição das configurações prefers-color-scheme do CSS se torna útil:

Preferências do sistema do usuário:    🌞 (dia/claro), 🌜 (noite/escuro)

Tema padrão do site:    💡 (claro), 💡🔴 (escuro com substituição)

/* Truques Jedi do CSS: CANCELAR NOITE */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
        background: white;
        color: black;
    }
}

🌜 O usuário definiu como ESCURO 🌜
    ⚙️ Navegador: "A tarefa está clara, MUDANDO para ESCURO!" 
        💡🔴 Seu site: "Não vou te decepcionar na sua CRENÇA!" 💡

A visualização ajuda a demonstrar claramente como estamos gerenciando a alternância entre dia e noite em nosso site.

Elementos do Usuário - Alternância de Tema Controlada pelo Usuário

Criando o Interruptor

Dê aos usuários uma varinha mágica (literalmente!). Vamos criar um elemento de alternância e embelezá-lo com ícones:

<label class="switch">
  <input type="checkbox" id="theme-toggle" checked>
  <span class="slider round"></span>
</label>

Vamos adicionar estilos através do CSS:

.switch {
  position: relative;
  display: inline-block;
  width: 60px; /* Pode ajustar o tamanho */
  height: 34px; /* Ajuste isso também */
}

.switch .slider:after {
  content: '\\263E'; /* FORÇAS ESCURAS aprovam */
  /* Vamos finalizar o estilo do nosso MESTRE DA LUZ */
}

Sincronizando com as Preferências do Usuário

Tudo está pronto. Agora precisamos garantir que nosso site se adapte a temas claros ou escuros de acordo com as preferências do usuário:

const userSystemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const themeToggle = document.getElementById('theme-toggle');

// Eu juro, não pense no pior
document.documentElement.setAttribute('data-theme', userSystemPrefersDark ? 'dark' : 'light');

// Fizemos algo transgressor
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
  document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
});

Video

Navigation