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)
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
- Aplicando cores em elementos HTML com CSS
- Outras propriedades de cores relacionadas:
color
,background-color
,border-color
(en-US),outline-color
(en-US),text-decoration-color
(en-US),text-emphasis-color
(en-US),text-shadow
,caret-color
(en-US), andcolumn-rule-color
(en-US) background-image
(en-US)print-color-adjust
(en-US)