Elemento CSS baseado no esquema de cores selecionado

Dev
4

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

Screenshot 2022-10-18 at 20.56.24
Screenshot 2022-10-18 at 20.56.241089×496 39.2 KB

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