color-scheme
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since janeiro de 2022.
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
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 |
[ light | dark | <custom-ident> ]+ && only?
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.
:root {
color-scheme: light dark;
}
Especificações
| Specification |
|---|
| CSS Color Adjustment Module Level 1 # color-scheme-prop |
Compatibilidade com navegadores
Loading…
Veja também
- Aplicando cores em elementos HTML com CSS
- Outras propriedades de cores relacionadas:
color,background-color,border-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow,caret-color, andcolumn-rule-color background-imageprint-color-adjust