Élément CSS basé sur le schéma de couleurs sélectionné

Dev
4

Oh oui, cela ne fonctionnera pas comme ça si le schéma de couleurs sombres est sélectionnable.

Je pense que la meilleure option que vous puissiez faire est de créer une définition de couleur personnalisée pour cela et vous pouvez utiliser cette variable de couleur pour les icônes d’en-tête.

Créez un composant de thème et ajoutez ce qui suit à l’onglet Définitions de couleur

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

Définissez le code couleur secondary-low sur $dark-theme-header-icons et le code couleur secondary sur $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};
}

Après cela, vous pouvez utiliser cette variable de couleur --custom-header-icons pour la couleur des icônes d’en-tête.

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