Verschiedene CSS-Änderungen für verschiedene Farbschemata

[Canapin (Coin-coin le Canapin)]

@Renato_Mendes

Soweit ich das bisher verstanden habe, wird jede Änderung in CSS sowohl auf den hellen als auch auf den dunklen Modus angewendet, was nicht viel Sinn ergibt.

Wenn ich das Problem richtig verstehe, gibt es dafür eine spezielle Vorgehensweise.

Update themes and plugins to support automatic dark mode

Great question, I tried this and noticed that we didn’t properly support using background images or theme variables in the special color definitions stylesheet. So I made some fixes in core, and you should be able to do this now (make sure you pull the latest core). So, if you have two images in your theme or theme component, with SCSS vars of $bg-light and $bg-dark respectively, you can add this to your color_definitions.scss stylesheet: $bg: url(dark-light-choose($bg-light, $bg-dark)); :ro…

Ich habe an einer Anleitung dazu gearbeitet, aber ich habe Schwierigkeiten, die Informationen so zusammenzuführen, dass sie klar genug sind, um sie direkt in einem Theme zu verwenden, aber dennoch die zugrunde liegenden technischen Aspekte erklären.

Um zu erklären, wie man es am besten macht…

Ich schlage vor, Sie erstellen ein Theme lokal (mit Install the Discourse Theme CLI console app to help you build themes wird Ihnen dabei helfen).
Erstellen Sie dann eine Datei common/color_definitions.scss in Ihrem Theme, in der Sie Folgendes schreiben:

$my-color: dark-light-choose(#FC3468, #FF93AC);

:root {
  --my-color: #{$my-color};
}

Dann können Sie in common/common.scss die Variable wie folgt verwenden:

h1 {
  color: var(--my-color);
}

Dadurch wird automatisch die richtige Farbe für den dunklen oder hellen Modus ausgewählt.