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

Unterstützung
1

Anfangs war ich mit einem hellen und einem dunklen Farbschema zufrieden, die in meinem einzigen Theme definiert waren. Doch es gibt CSS, das ich speziell ändern möchte, wenn das dunkle Farbschema aktiv ist.

Gibt es eine Möglichkeit, ein dunkles Theme als eine Art Child-Theme einzurichten, sodass es alle Stile des übergeordneten (hellen) Themes erbt, aber über ein eigenes Farbschema verfügt und ausschließlich aus Überschreibungen des übergeordneten Themes besteht?

Oder etwas Ähnliches?

1 „Gefällt mir“
2

Kannst du teilen, welches CSS du speziell nur für das dunkle Farbschema ändern möchtest? Theoretisch kannst du dies tun, wenn es nur um Farben geht, indem du Farbdefinitionen verwendest. Wenn es mehr als das ist, benötigst du separate Themes (und du müsstest auch auf den automatischen Wechsel des dunklen Modus verzichten).

2 „Gefällt mir“
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!

4

Das sollte common/color_definitions.scss sein.

Und in common.css sind die Fallback-Werte identisch mit dem Anfangswert, sodass du einfach Folgendes verwenden kannst:

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

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}
2 „Gefällt mir“
5

Ups, danke, ich habe meinen Beitrag bearbeitet, um das zu korrigieren.

Ah, okay, ich habe diesen Beitrag zu schnell überflogen und angenommen, es sei Best Practice, immer einen Fallback einzubinden. Mir ist jetzt klar, dass dieser nur für Abwärtskompatibilität gedacht ist, die ich nicht benötige. Danke für die Klärung. Ich habe den Code in meinem oben stehenden Beitrag entsprechend angepasst.

1 „Gefällt mir“
6

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