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

Dev
1

J’essaie de comprendre comment définir la couleur d’un élément en fonction du schéma de couleurs sélectionné. Ce qui suit fonctionne bien pour mon mode clair, mais pas très bien pour mon mode sombre.

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

Je préférerais avoir ce qui suit pour le mode sombre uniquement.

color: var(--secondary-low)

Cela fonctionne bien pour le mode sombre, mais pas pour le mode clair. Y a-t-il un moyen d’ajuster la valeur de color: en fonction du schéma de couleurs sélectionné ?

2

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 »
3

Merci pour vos conseils.

Cela semble être exactement ce que je voudrais faire (changer uniquement les icônes d’en-tête, pas tous les éléments avec la couleur --secondary). Une dernière question… cela fonctionne si le thème est défini comme thème sombre et que le mode sombre est activé par le système d’exploitation, mais pas si le thème sombre est choisi comme thème « normal ». Des suggestions à ce sujet ?

1 « J'aime »
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);
}
2 « J'aime »
5

Ça a marché à merveille ! Merci !

2 « J'aime »
6

Juste une dernière chose… est-ce que cela fonctionnera si j’inclus color_definitions.scss dans mon thème au lieu d’utiliser un composant de thème ?

1 « J'aime »
7

Bien sûr, cela fonctionnera aussi. :slightly_smiling_face:

1 « J'aime »
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.