Cores dependentes do esquema de cores CSS com light-dark()

As cores do sistema podem reagir ao valor de color-scheme usado no momento. A função light-dark() expõe o mesmo recurso aos autores.

Bramus

Cores do sistema em CSS

No CSS, é possível usar várias cores de um dos muitos espaços de cores. Por exemplo, é possível usar cores nomeadas, cores hexadecimais, funções de cor vinculadas a um espaço de cores específico e a função color(), que é 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 CSS Color Module Level 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 "plano de fundo do conteúdo ou dos documentos do aplicativo". Ele combina bem e também deve ser usado em conjunto com CanvasText, que representa o "texto em conteúdo ou documentos de aplicativos".

No CSS, use-as da seguinte maneira:

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, CanvasText no Chrome resulta em #121212, enquanto o Safari o especifica como o #1e1e1e, que é um pouco mais claro.

Um poder oculto dessas cores do sistema é que elas podem responder ao valor calculado da propriedade color-scheme. Por exemplo, os valores de 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, mude o valor de color-scheme definido em :root e veja como a página responde.

• Quando definido como light dark, 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ídia prefers-color-scheme.
• Quando definido como light, indica que o elemento é compatível com um esquema de cores claras.
• Quando definido como dark, indica que o elemento é compatível com um esquema de cores escuras.

Conheça o light-dark()

Até agora, a reação ao valor color-scheme usado era algo reservado para as cores do sistema. Graças ao light-dark(), especificado no Nível 5 do módulo de cores do CSS, agora você também tem o mesmo recurso.

light-dark() é uma função que aceita dois argumentos, que precisam ser do tipo <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() é um <color>. Ela pode ser usada no CSS em qualquer lugar que aceite um <color>. 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 em um modo desconhecido).

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

Para que light-dark() funcione corretamente, é necessário especificar um color-scheme. Como essa propriedade é herdada, normalmente ela é definida em :root, mas, se quiser, você pode defini-la em um elemento específico.

Aplicação prática

No exemplo a seguir, algumas propriedades personalizadas representam cores na página. Para atender ao 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 ao light-dark(), esse código pode ser simplificado. Como color-scheme está definido como light dark em :root, os valores dessas cores mudam automaticamente quando você altera o modo do SO de claro para modo 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 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.