CSS-Element basierend auf ausgewählter Farbpalette

[agf1997]

Ich versuche herauszufinden, wie man die Farbe eines Elements basierend auf dem ausgewählten Farbschema festlegt. Das Folgende funktioniert gut für meinen Hellmodus, aber nicht so gut für meinen Dunkelmodus.

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

Ich würde es für den Dunkelmodus bevorzugen.

color: var(--secondary-low)

Das funktioniert gut für den Dunkelmodus, aber nicht für den Hellmodus. Gibt es eine Möglichkeit, den Wert von color: basierend auf dem ausgewählten Farbschema anzupassen?

[Don]

Hallo,

Es gibt mehrere Möglichkeiten, dies zu tun.

Zum Beispiel:

Sie können die Farben des Farbschemas unter admin/customize/colors/ ändern. Wählen Sie einfach Ihr Dunkelmodus-Farbschema aus und ändern Sie den Farbcode für secondary.

Hinweis: Dies ändert die Sekundärfarbe überall, nicht nur bei den Header-Symbolen.

---

Oder Sie können die prefers-color-scheme-Medienabfrage verwenden, um secondary im Dunkelmodus in secondary-low zu ändern.

Etwas wie das hier:

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

---

Oder Sie können benutzerdefinierte Farbdefinitionen erstellen: Why might dark-light-choose() not work? - #2 by awesomerobot

---

Ich hoffe, das hilft

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

Danke für die Anleitung.

Das scheint genau das zu sein, was ich tun möchte (nur die Header-Symbole ändern, nicht alle Elemente mit der Farbe --secondary). Eine letzte Frage … das funktioniert, wenn das Theme als Dark-Mode-Theme eingestellt ist und der Dark-Mode vom Betriebssystem aktiviert wird, aber nicht, wenn das Dark-Mode-Theme als „reguläres“ Theme gewählt wird. Irgendwelche Vorschläge dazu?

[Don]

@agf1997

aber nicht, wenn der Dunkelmodus als „Standard“-Theme gewählt wird

Oh ja, das wird so nicht funktionieren, wenn das dunkle Farbschema auswählbar ist.

---

Ich denke, die beste Option ist, eine benutzerdefinierte Farbdefinition dafür zu erstellen, und Sie können diese Farbvariable für Header-Symbole verwenden.

Erstellen Sie eine Theme-Komponente und fügen Sie Folgendes zum Tab Farbdefinitionen hinzu

Setzen Sie den Farbcode von secondary-low auf $dark-theme-header-icons und den Farbcode von secondary auf $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};
}

Danach können Sie diese Farbvariable --custom-header-icons für die Farbe der Header-Symbole verwenden.

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

[agf1997]

Das hat wie am Schnürchen funktioniert! Danke!

[agf1997]

Nur eine weitere Sache … funktioniert das, wenn ich color_definitions.scss in mein Theme einbinde, anstatt eine Theme-Komponente zu verwenden?

[Don]

Sicher, das wird auch funktionieren.