Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
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 CSScolor-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 propriedadecolor-scheme precisa ser uma das palavras-chaves abaixo.
Valores
normalIndica que o elemento não possui nenhum esquema de cores, e deve ser renderizado utilizando o esquema de cores padrão do navegador.
lightIndica que o elemento pode ser renderizado utilizando o esquema de cores claro do sistema operacional.
darkIndica 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 declarecolor-scheme no elemento:root.
:root { color-scheme: light dark;}Especificações
| Specification |
|---|
| CSS Color Adjustment Module Level 1 # color-scheme-prop |
Compatibilidade com navegadores
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