Propriedade Color Scheme
Última atualização: 2026-09-13
color-scheme Propriedade Color Scheme
A propriedade color-scheme informa ao navegador quais esquemas de cor (claro/escuro) um elemento suporta, permitindo que o navegador escolha cores padrão adequadas para renderizar os controles nativos do elemento, como barras de rolagem e elementos de formulário. É uma propriedade importante para a adaptação ao modo escuro.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
color-scheme: normal | [ light | dark | <custom-ident> ]+ && only?;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | light | dark | only | Palavra-chave | Os esquemas de cor suportados |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| color-scheme | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： Definir color-scheme: dark no <html> ou <body> faz o navegador renderizar automaticamente elementos nativos como barras de rolagem e controles de formulário em estilos escuros.
Dica： only significa que o elemento suporta apenas o esquema listado e impede o navegador de alternar automaticamente; uma combinação light dark significa que ambos são suportados.
❓ Perguntas Frequentes
QQual é a diferença entre color-scheme e prefers-color-scheme?
Aprefers-color-scheme é uma media query que detecta a preferência de claro/escuro do sistema do usuário e decide qual folha de estilo carregar. color-scheme informa ao navegador quais esquemas a página ou o elemento suporta, para que ele possa escolher cores padrão para controles nativos como barras de rolagem e formulários. Na prática, elas funcionam juntas: a media query estiliza suas cores personalizadas e color-scheme mantém os controles nativos sincronizados.
QUm elemento escurece automaticamente após definir color-scheme?
ANão — ele não altera as cores que você escreveu; afeta apenas a renderização padrão do navegador para a UI nativa, como barras de rolagem, inputs, menus suspensos e placeholders. Fundos, textos e outras cores personalizadas ainda precisam ser definidos manualmente. Por exemplo, html { color-scheme: dark; background: #111; color: #eee; } é o que renderiza totalmente uma página escura.
QComo uso a palavra-chave only da propriedade color-scheme em CSS?
Aonly significa que suporta apenas os esquemas listados, sem alternância automática. Por exemplo, color-scheme: only dark força os controles nativos a renderizar sempre escuro, mesmo quando o sistema está no modo claro. color-scheme: light dark significa que ambos são suportados e segue o sistema. only convém a páginas de marca e de criação de conteúdo. O padrão normal segue o user agent e as configurações do sistema.
QQual é a diferença entre color-scheme e o meta theme-color?
Atheme-color é uma meta tag HTML que controla a cor da interface do navegador — a barra de endereço móvel e a cor do tema da janela. color-scheme é uma propriedade CSS que controla a renderização claro/escuro dos controles nativos dentro da página. Elas visam camadas diferentes: uma gerencia a moldura do navegador, a outra o conteúdo da página. Ao construir o modo escuro, você pode definir ambas para obter uma aparência consistente por dentro e por fora.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
