Recomendação de curso:

função light-dark() CSS

definição e uso, CSS light-dark() A função permite configurar dois valores de cor. Se o usuário configurar o tema claro, será retornado o primeiro valor; se configurar o tema escuro, será retornado o segundo valor.

Para usar light-dark() função, CSS color-scheme O atributo deve ser configurado como light dark.

Dica:Os usuários podem especificar suas preferências de esquema de cores através das configurações do sistema operacional (modo claro ou escuro) ou das configurações do navegador.

Exemplo

Uso light-dark() A função light-dark() habilita a configuração de dois valores de cor:

:root {
  color-scheme: light dark;
  --light-bg: snow;
  --light-color: black;
  --dark-bg: black;
  --dark-color: snow;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

Experimente você mesmo

Sintaxe CSS

light-dark(lightcolor, darkcolor)

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente essa função.

Páginas relacionadas

Referência:Propriedade color-scheme do CSS

Referência:Função var() do CSS

Tutorial:Variáveis do CSS