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 February 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

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 typediscrete

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.

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