Prefers-Color-Scheme e Prefers-Reduced-Motion
Respeite as preferências do sistema do usuário para o modo escuro e para reduzir as animações de movimento.
Prefers-Color-Scheme e Prefers-Reduced-Motion é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 3 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.
Recursos de mídia das preferências do usuário
O CSS pode consultar as preferências do sistema do usuário além do tamanho da tela. Isso permite ativar automaticamente o modo escuro e animações que respeitam as necessidades de acessibilidade, sem interação do usuário no site.
prefers-color-scheme
Detecta se o usuário configurou o OS para o modo claro ou escuro:
<p>This page follows your OS color-scheme preference.</p>
Implementando o modo escuro automático
A implementação mais simples usa variáveis CSS que trocam de valor com base na preferência:
<p>Auto dark mode via CSS variables.</p>
prefers-reduced-motion
Alguns usuários sentem náusea ou desconforto com animações. O recurso de mídia prefers-reduced-motion: reduce detecta essa preferência de acessibilidade.
<div class="box spun"></div>
Respeitando as preferências de movimento
Em vez de eliminar todas as animações, forneça animações sutis alternativas:
<div class="card">Card with motion-aware transition</div>
prefers-contrast
Detecta se o usuário prefere contraste mais alto (por acessibilidade) ou mais baixo. Ajuste as escolhas de cores de acordo:
<p>Contrast-aware text</p>
prefers-reduced-transparency
Alguns usuários com deficiências visuais preferem menos transparência. Reduza os efeitos baseados em backdrop-filter e opacity:
<div class="glass-card">Glass card</div>
Acesso às preferências com JavaScript
Consulte essas preferências a partir do JavaScript usando window.matchMedia():
<div class="demo dark-mode" id="demo">Preference-aware box (dark-mode class toggled via JS below)</div>
<script>
const dark = window.matchMedia('(prefers-color-scheme: dark)');
dark.addEventListener('change', e => {
document.getElementById('demo').classList.toggle('dark-mode', e.matches);
});
</script>
Preferência do sistema + substituição manual
Respeite a preferência do sistema por padrão e permita que os usuários a substituam com um botão de alternância. Armazene a substituição em localStorage e aplique uma classe a <html>:
<div class="theme dark">Manual dark override applied via class</div>
prefers-reduced-data
Detecta se o usuário ativou o modo de economia de dados. Forneça imagens menores ou ignore recursos não essenciais:
<div class="hero">Hero banner</div>
Testando no DevTools
Na aba Rendering do Chrome DevTools, é possível emular o modo escuro, o movimento reduzido e outros recursos de mídia de preferência sem alterar as configurações do OS.
Verificação rápida
Qual é a melhor forma de implementar o modo escuro automático com suporte também a um botão de alternância manual?
Recapitulação
prefers-color-scheme permite ativar o modo escuro automaticamente. prefers-reduced-motion deve desativar ou simplificar as animações para garantir a acessibilidade. Implemente ambos usando variáveis CSS para manter o código limpo e fácil de manter. Sempre forneça uma substituição manual para que os usuários possam controlar sua preferência independentemente do OS.
Aprenda CSS com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “Prefers-Color-Scheme e Prefers-Reduced-Motion” é grátis?
Sim — o texto completo de “Prefers-Color-Scheme e Prefers-Reduced-Motion” é 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 “Prefers-Color-Scheme e Prefers-Reduced-Motion”?
Respeite as preferências do sistema do usuário para o modo escuro e para reduzir as animações de movimento. 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 3 de 4.
Quanto tempo leva a aula “Prefers-Color-Scheme e Prefers-Reduced-Motion”?
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
- Sintaxe e Pontos de Interrupção Comuns
- Consultas de Largura, Altura e Orientação
- Prefers-Color-Scheme e Prefers-Reduced-Motion
- Combinando Várias Media Queries