0Pricing
CSS Academy · Aula

Propriedade color-scheme

Use a propriedade color-scheme para informar ao navegador quais temas um elemento aceita.

Propriedade color-scheme é 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.

O que é color-scheme?

A propriedade color-scheme informa ao navegador quais esquemas de cores um elemento ou a página aceita. O navegador usa essas informações para estilizar seus próprios elementos de interface — barras de rolagem, controles de formulário, caixas de seleção e bordas de campos de entrada — de acordo com o esquema solicitado.

Valores de color-scheme

Valores aceitos:

  • normal: o elemento usa o padrão do documento
  • light: o elemento aceita apenas o esquema claro
  • dark: o elemento aceita apenas o esquema dark
  • light dark: aceita ambos; o navegador escolhe com base na preferência
  • dark light: prefere dark; usa claro como fallback

Elementos da interface do navegador

O navegador estiliza automaticamente estes elementos de acordo com color-scheme:

  • Barras de rolagem
  • Campos de entrada, áreas de texto e menus suspensos de seleção
  • Caixas de seleção e botões de opção
  • Controles deslizantes de intervalo
  • Seletores de data e hora

Definindo no elemento html

Definir color-scheme no elemento raiz altera a renderização da interface do sistema em toda a página:

<input type="checkbox" /> <select><option>A</option><option>B</option></select>

Equivalente em uma tag meta

Você também pode declarar color-scheme em HTML como uma tag meta para aplicá-lo mais cedo, antes do carregamento do CSS:

<pre class="code-sample">&lt;meta name="color-scheme" content="light dark"&gt;</pre>

Modo dark sem cores personalizadas

Um modo dark mínimo: defina color-scheme: dark e deixe o navegador cuidar automaticamente dos elementos de formulário e das barras de rolagem:

<p>Native form controls and page background adapt to dark automatically.</p>
<input type="text" placeholder="Native input" />

Combinando com prefers-color-scheme

Use prefers-color-scheme para detectar a preferência e definir juntos seus tokens personalizados AND a propriedade color-scheme:

<div class="demo">Themed via variables + color-scheme</div>

color-scheme com escopo

Aplique color-scheme a elementos específicos para criar áreas claras isoladas em uma página dark:

<div class="light-widget">Always-light widget<br/><input type="date" /></div>

Cores forçadas / Alto contraste do Windows

A consulta de mídia forced-colors detecta o Modo de Alto Contraste do Windows. Use color-scheme e forced-colors juntos para oferecer suporte abrangente à acessibilidade.

<div class="card">Card respects forced-colors mode</div>

Palavras-chave de cores do sistema

Quando forced-colors estiver ativo, use palavras-chave de cores do sistema CSS, que correspondem à paleta de cores acessível do usuário:

<button>System-styled button</button>

Verificação rápida

Qual comportamento do CSS é habilitado ao definir color-scheme: dark no elemento html?

Recapitulação

color-scheme instrui o navegador sobre como estilizar seus próprios controles de interface para um elemento ou uma página. Use color-scheme: light dark globalmente para habilitar a adaptação automática da interface nativa. Combine-o com propriedades personalizadas do CSS para implementar completamente o modo dark. Use a tag meta para aplicar a configuração antecipadamente, antes do carregamento do CSS.

Perguntas Frequentes

A aula “Propriedade color-scheme” é grátis?

Sim — o texto completo de “Propriedade 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 “Propriedade color-scheme”?

Use a propriedade color-scheme para informar ao navegador quais temas um elemento aceita. 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 “Propriedade 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

  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