color-scheme

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 value	`normal`
Aplica-se a	all elements and text
Inherited	yes
Computed value	as specified
Animation type	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)