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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
color-scheme
dark
light
normal
only dark keyword
only light keyword

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

Veja também