Esta página foi traduzida pela API Cloud Translation.

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, é possível usar muitas cores de um dos 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() 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 do aplicativo ou dos documentos". 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 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 #1e1e1e, um pouco mais leve.

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, indica que o elemento oferece suporte a um esquema de cores escuras.

Uma página que permite mudar o valor de color-scheme. Ao mudar, as cores da página mudam quando passam de claro para escuro ou vice-versa, mesmo que as declarações no elemento body permaneçam as mesmas.

Conheça o `light-dark()`

Compatibilidade com navegadores

Origem

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;
  }
}

Uma página que responde ao modo claro ou escuro por prefers-color-scheme.
Os valores de cor são alterados no CSS usando uma consulta de mídia.

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);
}

Uma página que responde ao modo claro ou escuro usando prefers-color-scheme.
Os valores de cor são alterados usando light-dark().

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.

Uma página que responde ao modo claro ou escuro usando prefers-color-scheme.
Os valores de cor são alterados usando light-dark().
Com uma das opções, é possível forçar o modo claro ou escuro. Isso é feito manipulando o valor color-scheme.

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

Cores do sistema em CSS

Conheça o light-dark()

Aplicação prática

Conheça o `light-dark()`