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

Bonjour,

Il existe plusieurs façons de procéder.

Par exemple :

Vous pouvez modifier les couleurs du schéma de couleurs sur admin/customize/colors/. Sélectionnez simplement votre schéma de couleurs en mode sombre et changez le code couleur secondary.

Remarque : Cela changera la couleur secondaire partout, pas seulement sur les icônes de l’en-tête.


Ou vous pouvez utiliser le média prefers-color-scheme pour changer secondary en secondary-low en mode sombre.

Quelque chose comme ceci :

.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 vous pouvez créer des définitions de couleurs personnalisées : Why might dark-light-choose() not work? - #2 by awesomerobot


J’espère que cela vous aidera :slightly_smiling_face:

2 « J'aime »