color-scheme

Baseline 2022

Newly available

Since February 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

A Propriedade CSS color-scheme possibilita que um elemento possa indicar em qual esquema de cores é mais amigável de ser renderizado.

Opções comuns em esquemas de cores de sistemas operacionais são "claro" e "escuro", ou "modo diurno" e "modo noturno". Quando um usuário seleciona um desses esquemas de cores, o sistema operacional faz ajustes na interface do usuário. Isso inclui controles de formulários, barra de scroll, e os valores utilizados no sistema de cores do CSS.

Syntax

css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

/* Valores globais */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: unset;

O valor da propriedade color-scheme precisa ser uma das palavras-chaves abaixo.

Valores

normal

Indica que o elemento não possui nenhum esquema de cores, e deve ser renderizado utilizando o esquema de cores padrão do navegador.

light

Indica que o elemento pode ser renderizado utilizando o esquema de cores claro do sistema operacional.

dark

Indica que o elemento pode ser renderizado utilizando o esquema de cores escuro do sistema operacional.

Definição formal

Initial valuenormal
Aplica-se aall elements and text
Inheritedyes
Computed valueas specified
Animation type (en-US)discrete

Sintaxe formal

color-scheme = 
  normal                                       | (en-US)
  [ (en-US) light | (en-US) dark | (en-US) <custom-ident> (en-US) ] (en-US)+ (en-US) && (en-US) only? (en-US)

Exemplos

Adaptando a esquemas de cores

Para fazer com que toda a página tenha o esquema de cores de preferência do usuário declare color-scheme no elemento :root.

css
:root {
  color-scheme: light dark;
}

Especificações

Specification
CSS Color Adjustment Module Level 1
# color-scheme-prop

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também