Wie ändere ich die CSS-Farbe für ein einzelnes Theme-Farbschema?

Unterstützung
1

Ich habe derzeit ein einzelnes Theme mit zwei Farbpaletten (eine helle und eine dunkle). Mit der dunklen Palette bin ich zu 90 % zufrieden, aber in einigen Fällen würde ich gerne Korrekturen vornehmen.

Beispielsweise gibt es in der dunklen Palette nicht genug Kontrast zwischen den Hintergrund- und Vordergrundfarben für Flüstern:

.whisper .topic-body .cooked {
    color: var(--primary-medium)
}

Ich weiß, dass ich das CSS überschreiben kann, aber wenn ich es auf var(--primary-light) ändere, wirkt sich dies auch auf die helle Palette aus.

Gibt es eine Möglichkeit, eine einzelne Palette gezielt anzusprechen, oder besteht die beste Praxis darin, zwei verschiedene Themes zu erstellen, die jeweils ihre eigene Palette haben?

Mein Problem mit diesem zweiten Ansatz ist, dass ich viele andere Anpassungen duplizieren müsste, die nichts mit Farben zu tun haben.

1 „Gefällt mir“
2

Klar, es gibt ein paar SCSS-Funktionen, mit denen du prüfen kannst, ob du dich in einem hellen oder dunklen Farbschema befindest.

Du verwendest sie wie folgt.

@if is-light-color-scheme() {
  // CSS für helles Farbschema
  h1 {
    color: green;
  }
}

@if is-dark-color-scheme() {
  // CSS für dunkles Farbschema
  h1 {
    color: red;
  }
}
4 „Gefällt mir“
3

Danke, dass du das angesprochen hast, @Johani. Die Funktion dark-light-choose($light, $dark) macht genau das, was ich will, aber mein Problem ist nun, dass sie die Änderung des Farbschemas nicht erkennt.

Mein einziges aktives Theme heißt „Nacho

4

Dies wurde hier behoben: Why might dark-light-choose() not work? - #2 by awesomerobot