Dunkle Design-Version, die das helle Design erbt + Teile überschreibt?

Unterstützung
3

Ich habe diesen Beitrag bearbeitet, um alles auf einmal zusammenzufassen, was ich gelernt habe, anstatt die Leser mit dem Prozess zu langweilen:

Beispiel für CSS, das ich zwischen hellem und dunklem Modus variieren möchte:

Heller Modus:

.nav-pills>li>a:hover {
  &:not(.active) {
    color: var(--primary-high, $primary-high);
  }
}

Dunkler Modus:

.nav-pills>li>a:hover {
  background-color: $quaternary-low-dmode;
}

Ich habe mich auf @pmusarajs Beitrag hier bezogen und nach etwas Experimentieren folgendes getan:

In common/color_definitions.scss habe ich Variablen definiert, die die Hintergrundfarbe und die Schriftfarbe von .nav-pills repräsentieren. Mein dunkler Modus gibt keine Schriftfarbe an, und mein heller Modus gibt keine Hintergrundfarbe an, aber ich muss etwas angeben, damit dark-light-choose() funktioniert. Daher habe ich die Discourse-Kernvariablen verwendet ($primary bzw. $quaternary-low):

$quaternary-low-dmode: #405E68;

$nav-pills: dark-light-choose($quaternary, $primary);
$nav-pills-bg: dark-light-choose($quaternary-low, $quaternary-low-dmode);

:root {
  --custom-nav-pills: #{$nav-pills};
  --custom-nav-pills-bg: #{$nav-pills-bg};
}

Dann der relevante Code in common.scss:


// Allzweck-SCSS für beide Modi, dunkel und hell:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}

Es funktioniert!