As cores do sistema podem reagir ao valor de color-scheme
usado atualmente. A função light-dark()
expõe a mesma capacidade aos autores.
Cores do sistema no CSS
No CSS, é possível usar várias cores de um dos vários espaços de cores. Por exemplo, é possível usar cores nomeadas, cores hexadecimais, funções de cor vinculadas a um espaço de cor específico ou a função color()
mais genérica.
Por exemplo, a cor nomeada cornflowerblue
também pode ser representada como #6495ED
, hsl(218.54deg 79.19% 66.08%)
ou color(display-p3 0.43 0.58 0.9)
.
Além desses vários nomes e formatos, o CSS inclui cores descritas como cores do sistema, especificadas no Módulo de cores CSS Nível 4. Essas cores do sistema são definidas pelo navegador e representadas por uma palavra-chave.
Por exemplo, a cor do sistema Canvas
, que não deve ser confundida com o elemento <canvas>
, representa o "segundo plano do conteúdo ou dos documentos do aplicativo". Ele combina com CanvasText
e também precisa ser usado em conjunto com CanvasText
, que representa o "texto no conteúdo ou nos documentos do aplicativo".
No CSS, faça o seguinte:
body {
color: CanvasText;
background-color: Canvas;
}
Por padrão, CanvasText
resulta em uma cor próxima a black
, e Canvas
é uma cor próxima a white
. A implementação real depende do navegador. Por exemplo, a CanvasText
no Chrome resulta em #121212
, enquanto no Safari ela é especificada como o #1e1e1e
ligeiramente mais leve.
Um poder oculto dessas cores do sistema é que elas podem responder ao valor calculado da propriedade color-scheme
. Por exemplo, os valores para CanvasText
e Canvas
são invertidos quando o color-scheme
usado é dark
.
:root {
color-scheme: dark;
}
body {
color: CanvasText;
background-color: Canvas;
}
Na demonstração a seguir, é possível mudar o valor de color-scheme
definido no :root
e conferir como a página responde.
- Quando definido como
light dark
, ele indica que o elemento é compatível com os modos claro e escuro. A escolha do valor usado depende do valor da condição de mídiaprefers-color-scheme
. - Quando definido como
light
, ele indica que o elemento é compatível com um esquema de cores claras. - Quando definido como
dark
, ele indica que o elemento é compatível com um esquema de cores escuras.
Conheça o light-dark()
Até agora, reagir ao valor color-scheme
usado era algo reservado para as cores do sistema. Graças ao método light-dark()
, especificado no Módulo de cores CSS de nível 5, agora você também tem o mesmo recurso.
light-dark()
é uma função que aceita dois argumentos, ambos precisam ser um <color>
. Uma das duas é escolhida dependendo do esquema de cores usado.
- Se o esquema de cores usado for
light
ou desconhecido, o valor calculado do primeiro valor será retornado. - Se o esquema de cores usado for
dark
, o valor calculado da segunda cor será retornado.
O resultado de light-dark()
é uma <color>
. Pode ser usado no CSS em qualquer lugar em que um <color>
seja aceito. Por exemplo, nas propriedades color
e background-color
, mas também em uma função como linear-gradient()
.
No exemplo a seguir, a cor de fundo usada é #333
no modo escuro ou #ccc
no modo claro (ou um modo desconhecido).
:root {
color-scheme: light dark;
}
body {
background-color: light-dark(#ccc, #333);
}
Para que light-dark()
funcione corretamente, você precisa especificar um color-scheme
. Como essa propriedade é herdada, você normalmente a define em :root
. No entanto, se quiser, você pode optar por defini-la em um elemento específico.
Aplicação prática
No exemplo a seguir, algumas propriedades personalizadas representam as cores na página. Para o modo escuro, os valores dessas propriedades personalizadas são substituídos por um valor diferente em uma condição de mídia prefers-color-scheme
.
:root {
--primary-color: #333;
--primary-background: #e4e4e4;
--highlight-color: hotpink;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #fafafa;
--primary-background: #121212;
--highlight-color: lime;
}
}
Graças a light-dark()
, este código pode ser simplificado. Como color-scheme
está definido como light dark
em :root
, os valores dessas cores mudam automaticamente quando o SO passa do modo claro para o escuro e vice-versa.
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
Como um bônus, é possível forçar uma determinada subárvore do DOM a usar apenas o modo claro ou escuro, definindo color-scheme
como dark
ou light
. No exemplo a seguir, isso é aplicado a :root
.