Atributo color-scheme CSS

Definição e uso

color-scheme A propriedade indica qual esquema de cores do sistema operacional o elemento deve usar para renderização.

As escolhas comuns para o esquema de cores do sistema operacional são "claro" (claro) e "escuro" (escuro), ou "modo dia" (dia) e "modo noite" (noite).

Exemplo

Definir toda a página como esquema de cores escuro:

:root {
  color-scheme: escuro;
}

Experimente você mesmo

Sintaxe do CSS

color-scheme: normal|light|dark|only light|only dark|light dark;

Valor do atributo

Valor Descrição
normal O elemento pode ser renderizado com o esquema de cores padrão do sistema operacional
claro O elemento pode ser renderizado com o esquema de cores claro do sistema operacional
escuro O elemento pode ser renderizado com o esquema de cores escuro do sistema operacional
apenas claro

O elemento deve ser renderizado apenas com o esquema de cores claro do sistema operacional.

Proibir que o navegador sobrescreva o esquema de cores do elemento.
apenas escuro

O elemento deve ser renderizado apenas com o esquema de cores escuro do sistema operacional.

Proibir que o navegador sobrescreva o esquema de cores do elemento.
claro escuro O elemento pode ser renderizado com o esquema de cores claro ou escuro do sistema operacional (dependendo das configurações do usuário)

Detalhes técnicos

Valor padrão: normal
Herança: sim
Versão: Módulo de Ajuste de Cor de CSS Nível 1
Sintaxe do JavaScript:

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa propriedade.

Chrome Edge Firefox Safari Opera
81 81 96 13 68