0Pricing
CSS Academy · Aula

Alternância automática e manual do modo escuro

Crie uma alternância de tema que respeite a preferência do sistema por padrão e permita que os usuários a substituam manualmente.

Alternância automática e manual do modo escuro é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

O objetivo

Uma implementação ideal do modo dark detecta automaticamente a preferência do OS por padrão e oferece um botão de alternância que permite ao usuário substituí-la de forma independente, mantendo essa preferência entre os carregamentos da página.

Visão geral da arquitetura

Há três states a tratar:

  1. Preferência do system: use prefers-color-scheme com variáveis CSS
  2. Substituição do usuário: dark: defina uma classe ou um atributo de dados em <html>
  3. Substituição do usuário: claro: defina uma classe diferente para impedir o modo dark automático

Configuração dos tokens CSS

Defina variáveis CSS que sejam propagadas corretamente em todos os states:

<div class="demo" data-theme="dark">Dark token demo</div>
<div class="demo" data-theme="light">Light token demo</div>

Lógica do toggle em JavaScript

Leia a preferência salva, aplique-a e atualize-a ao alternar:

<div class="demo" id="theme-demo">Toggle my theme</div>
<div class="demo" data-theme="dark">Dark override example</div>
<button id="toggle-btn">Toggle Theme</button>
<script>
  function toggleTheme() {
    const current = document.getElementById('theme-demo').dataset.theme;
    const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    if (!current) {
      const next = system === 'dark' ? 'light' : 'dark';
      document.getElementById('theme-demo').dataset.theme = next;
    } else {
      delete document.getElementById('theme-demo').dataset.theme;
    }
  }
  document.getElementById('toggle-btn').addEventListener('click', toggleTheme);
</script>

Toggle de três states

Um toggle de três states mais refinado: Claro | System | Dark:

<div class="demo" id="theme-demo">Cycles: light → system → dark</div>
<div class="demo" data-theme="dark">Dark state example</div>
<p id="state-label">system</p>
<button id="cycle-btn">Cycle Theme</button>
<script>
  const states = ['light', 'system', 'dark'];
  let current = 'system';
  const demo = document.getElementById('theme-demo');
  const label = document.getElementById('state-label');
  document.getElementById('cycle-btn').addEventListener('click', () => {
    current = states[(states.indexOf(current) + 1) % states.length];
    label.textContent = current;
    if (current === 'system') { delete demo.dataset.theme; } else { demo.dataset.theme = current; }
  });
</script>

Evitando o flash do tema incorreto

Aplique o tema salvo de forma síncrona antes da renderização da página:

<pre class="code-sample">&lt;!-- In &lt;head&gt;, before any styles --&gt;
&lt;script&gt;
  const t = localStorage.getItem("theme");
  if (t) document.documentElement.dataset.theme = t;
&lt;/script&gt;</pre>

Acessibilidade do botão de toggle

O botão de toggle deve comunicar o estado current aos leitores de tela. Atualize o rótulo acessível quando ele for alternado:

<button id="theme-toggle" aria-label="Switch to dark mode">🌙</button>

Transição de tema animada

Transições suaves de cores quando o tema muda:

<div class="demo" id="at-demo">Smooth theme transition</div>
<button onclick="document.documentElement.classList.add('theme-transitioning'); const d=document.getElementById('at-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff'; setTimeout(()=>document.documentElement.classList.remove('theme-transitioning'),250);">Toggle</button>

Monitoramento de alterações do system

Reaja também se o usuário alterar a preferência do OS enquanto a página estiver aberta:

<p id="status">Listening for system theme changes…</p>
<script>
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
    document.getElementById('status').textContent = 'System changed to ' + (e.matches ? 'dark' : 'light');
  });
</script>

Ícones do modo dark

Troque os ícones para cada modo. Use o elemento picture para imagens adaptadas ao tema ou CSS para exibir e ocultar ícones diferentes:

<div>Light: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>
<div data-theme="dark">Dark: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>

Resumo: lista de verificação da implementação

Lista de verificação do modo dark:

  • Variáveis CSS para todos os tokens de cores
  • Consulta de mídia prefers-color-scheme para detecção automática
  • Atributo data-theme para substituição manual
  • localStorage para persistência
  • Script embutido no cabeçalho para evitar o flash
  • Botão de toggle acessível com aria-label dinâmico

Verificação rápida

Qual técnica evita um "flash de tema incorreto" quando a página é carregada?

Recapitulação

Um toggle completo do modo dark usa variáveis CSS para os tokens do tema, uma consulta prefers-color-scheme para detecção automática, um atributo data-theme para substituição manual, localStorage para persistência e um script síncrono no cabeçalho para evitar o flash. Ofereça um toggle acessível de três states — claro/system/dark — para proporcionar a melhor experiência ao usuário.

Perguntas Frequentes

A aula “Alternância automática e manual do modo escuro” é grátis?

Sim — o texto completo de “Alternância automática e manual do modo escuro” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “Alternância automática e manual do modo escuro”?

Crie uma alternância de tema que respeite a preferência do sistema por padrão e permita que os usuários a substituam manualmente. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Alternância automática e manual do modo escuro”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Consulta de mídia prefers-color-scheme
  2. Variáveis CSS para temas
  3. Propriedade color-scheme
  4. Alternância automática e manual do modo escuro
← Voltar para CSS Academy