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

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

Bramus

Cores do sistema em CSS

No CSS, você pode usar muitas cores de um dos diversos espaços de cor. 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() 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 cor 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 "plano de fundo do conteúdo ou documentos do aplicativo". Ele combina bem com CanvasText, que representa o "texto no conteúdo do aplicativo ou nos documentos", e também foi criado para ser usado com ele.

No CSS, elas são usadas da seguinte maneira:

body {
  color: CanvasText;
  background-color: Canvas;
}

Por padrão, CanvasText resulta em uma cor próxima de black e Canvas é uma cor próxima de white. A implementação real depende do navegador. Por exemplo, CanvasText no Chrome resulta em #121212, enquanto o Safari a especificou como #1e1e1e um pouco mais clara.

Um poder oculto dessas cores do sistema é que elas podem responder ao valor computado 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, você pode mudar o valor de color-scheme definido em :root e conferir como a página responde.

• Quando definido como light dark, indica que o elemento oferece suporte aos 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 oferece suporte a um esquema de cores claras.
• Quando definido como dark, ele indica que o elemento oferece suporte a 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 a light-dark(), especificado no Nível 5 do módulo de cores do CSS, agora você também tem a mesma capacidade.

light-dark() é uma função que aceita dois argumentos, ambos precisam ser <color>. Um dos dois é escolhido dependendo do esquema de cores usado.

• Se o esquema de cores usado for light ou desconhecido, o valor computado 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>. Ele pode ser usado no CSS em qualquer lugar onde um <color> seja aceito. Por exemplo, nas propriedades color e background-color, mas também em uma função como linear-gradient().

No exemplo abaixo, a cor de plano 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, é necessário especificar um color-scheme. Como essa propriedade é herdada, ela normalmente é definida em :root, mas você pode definir em um elemento específico.

Aplicação prática

No exemplo abaixo, 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 a 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ê muda o SO 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 bônus, é possível forçar um determinado subárvore do DOM a usar apenas o modo claro ou escuro definindo color-scheme como dark ou light. No exemplo abaixo, isso é aplicado a :root.