Consulta de mídia prefers-color-scheme
Detecte a preferência de modo escuro ou claro do sistema do usuário usando a consulta de mídia prefers-color-scheme.
Consulta de mídia prefers-color-scheme é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 1 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.
Por que usar o modo escuro automático?
Muitos usuários ativam o modo escuro no nível do OS para obter mais conforto, economizar bateria (em telas OLED) ou por acessibilidade. A consulta de mídia prefers-color-scheme detecta essa preferência e permite que seu site se adapte automaticamente.
Valores da consulta
Há dois valores:
light— o usuário prefere um esquema de cores claro (ou não tem preferência)dark— o usuário prefere o modo escuro
<p>This page respects your OS dark mode setting.</p>
Dark em primeiro lugar para dispositivos móveis
Se a maioria dos seus usuários estiver em dispositivos móveis OLED, considere fazer de dark o estilo base:
<p>Dark by default; switches to light in light mode.</p>
Abordagem com variáveis CSS
A implementação mais limpa é definir um conjunto de tokens para cada esquema:
<div class="card">Themed card using CSS variables</div>
Imagens no modo dark
Reduza o brilho das imagens no modo dark para evitar imagens ofuscantes:
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='120'><rect width='200' height='120' fill='%23ff6347'/></svg>" alt="demo" />
Detecção em JavaScript
Verifique a preferência pelo modo dark em JavaScript para obter um comportamento dinâmico:
<p id="theme-status">Checking...</p>
<script>
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.getElementById('theme-status').textContent = isDark ? 'System is in DARK mode' : 'System is in LIGHT mode';
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.getElementById('theme-status').textContent = e.matches ? 'System is in DARK mode' : 'System is in LIGHT mode';
});
</script>
Testes no DevTools
No Chrome DevTools → aba Renderização → Emular CSS prefers-color-scheme. Alterne entre claro e dark sem alterar as configurações do OS. No Firefox: DevTools → aba Inspetor → menu do ícone de olho.
Princípios de cores do modo dark
Um modo dark eficaz:
- Use cinza dark, não preto puro, nos planos de fundo — isso reduz o cansaço visual
- Reduza as sombras de elevação — use tons de fundo mais claros para superfícies mais elevadas
- Ajuste as cores das bordas para que sejam mais claras e tenham melhor visibilidade
- Verifique as proporções de contraste do texto — podem ser necessárias proporções diferentes
Padrão inadequado de inversão de cores
Nunca simplesmente inverta todas as cores com filter: invert(1) para criar o modo dark. As imagens e os ícones ficam com cores estranhas. Use tokens apropriados para o modo dark, com cores adequadas para cada elemento.
Desempenho: evitando o flash
Se você usar a alternância de temas controlada por JavaScript, evite um flash de tema sem estilo (FOUT) aplicando a classe do tema a <html> de forma síncrona em uma tag <script> dentro de <head>, antes da renderização da página.
Cor do tema nos metadados
Atualize a cor da interface do navegador — barra de endereço móvel e alternador de tarefas — para corresponder ao tema dark:
<pre class="code-sample"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1a2e"></pre>
Verificação rápida
Qual valor de consulta de mídia deve ser usado para aplicar estilos do modo dark quando o OS estiver configurado para dark?
Recapitulação
prefers-color-scheme: dark detecta a preferência do OS pelo modo dark. Implemente o modo dark automático usando variáveis CSS que trocam os valores dos tokens dentro da consulta de mídia. Reduza o brilho das imagens no modo dark. Faça testes no DevTools. Atualize a tag meta theme-color do navegador para obter uma experiência móvel completa.
Perguntas Frequentes
A aula “Consulta de mídia prefers-color-scheme” é grátis?
Sim — o texto completo de “Consulta de mídia prefers-color-scheme” é 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 “Consulta de mídia prefers-color-scheme”?
Detecte a preferência de modo escuro ou claro do sistema do usuário usando a consulta de mídia prefers-color-scheme. 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 1 de 4.
Quanto tempo leva a aula “Consulta de mídia prefers-color-scheme”?
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
- Consulta de mídia prefers-color-scheme
- Variáveis CSS para temas
- Propriedade color-scheme
- Alternância automática e manual do modo escuro