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

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.

Bramus

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ídia prefers-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.