Elemento CSS baseado no esquema de cores selecionado

[agf1997]

Estou tentando descobrir como definir a cor de um elemento com base no esquema de cores selecionado. O seguinte funciona bem para o meu modo claro, mas não tão bem no meu modo escuro.

.d-header-icons .d-icon {
	width: 100%;
	line-height: 1.4;
	display: inline-block;
	color: var(--secondary);
}

Eu preferiria ter o seguinte apenas para o modo escuro.

color: var(--secondary-low)

Isso funciona bem para o modo escuro, mas não para o modo claro. Existe alguma maneira de ajustar o valor de color: com base no esquema de cores selecionado?

[Don]

Olá,

Existem várias maneiras de fazer isso.

Por exemplo:

Você pode alterar as cores do esquema de cores em admin/customize/colors/. Basta selecionar seu esquema de cores de modo escuro e alterar o código de cor secondary.

Observação: Isso alterará a cor secundária em todos os lugares, não apenas nos ícones do cabeçalho.

---

Ou você pode usar a mídia prefers-color-scheme para alterar secondary para secondary-low no modo escuro.

Algo como isto:

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--secondary);
  @media (prefers-color-scheme: dark) {
    color: var(--secondary-low);
  }
}

---

Ou você pode criar definições de cores personalizadas: Why might dark-light-choose() not work? - #2 by awesomerobot

---

Espero que ajude

[agf1997]

@Don

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--secondary);
  @media (prefers-color-scheme: dark) {
    color: var(--secondary-low);
  }
}

Obrigado pela orientação.

Isso parece ser exatamente o que eu gostaria de fazer (alterar apenas os ícones do cabeçalho, não todos os itens com a cor --secondary). Uma última pergunta… isso funciona se o tema estiver configurado como tema de modo escuro e o modo escuro for ativado pelo sistema operacional, mas não se o tema de modo escuro for escolhido como tema “Regular”. Alguma sugestão quanto a isso?

[Don]

@agf1997

mas não se o tema modo escuro for escolhido como tema “Regular”

Ah, sim, isso não vai funcionar assim se o esquema de cores escuras for selecionável.

---

Eu acho que a melhor opção que você pode fazer é criar uma definição de cor personalizada para isso e você pode usar essa variável de cor para os ícones do cabeçalho.

Crie um componente de tema e adicione o seguinte à aba Definições de Cores

Defina o código de cor secondary-low para $dark-theme-header-icons e o código de cor secondary para $light-theme-header-icons

$dark-theme-header-icons: #e9e9e9;
$light-theme-header-icons: #222;

$header-icons: dark-light-choose($light-theme-header-icons, $dark-theme-header-icons);

:root {
  --custom-header-icons: #{$header-icons};
}

Depois disso, você pode usar essa variável de cor --custom-header-icons para a cor dos ícones do cabeçalho.

.d-header-icons .d-icon {
  width: 100%;
  line-height: 1.4;
  display: inline-block;
  color: var(--custom-header-icons);
}

[agf1997]

Isso funcionou como um encanto! Obrigado!

[agf1997]

Só mais uma coisa… isso funcionará se eu incluir color_definitions.scss no meu tema em vez de usar um componente de tema?

[Don]

Claro, isso também funcionará.