Hallo!
Soweit ich das verstanden habe, wird jede Änderung in CSS sowohl auf den hellen als auch auf den dunklen Modus angewendet, was nicht viel Sinn ergibt.
Zuletzt muss ich mich mit diesem Problem befassen: Im dunklen Modus sieht der umbrochene Text genauso aus wie die Farbe des Wrappers, und wenn ich ihn über CSS ändere, wird auch der umbrochene Text des hellen Themas geändert, aber das möchte ich nicht.
Wie kann ich das CSS nur für ein Farbschema ändern?
Wenn Sie die Farbvariablen (z. B. var(--primary-very-low), var(--secondary-low)) verwenden, die in der Styleguide /styleguide/atoms/colors Ihres Forums verfügbar sind, dann sollten die dunklen und hellen Modi die verschiedenen Variablen berücksichtigen (Sie können diese auch in den beiden Farbpaletten sehen, die Sie für den dunklen und hellen Schalter verwenden). Sie müssen die Einstellung styleguide enabled in den Admin-Einstellungen aktivieren, und es gibt auch die Einstellung styleguide admin only, die dies nur auf Administratoren beschränkt.
Das Problem ist, dass ich bereits Änderungen vorgenommen habe, die die in der Styleguide festgelegte Farbvariable nicht berücksichtigt haben (ich konnte jedoch nicht über /styleguide/atoms/colors darauf zugreifen). Gibt es eine Möglichkeit, dies zu tun, ohne die Variablen zu befolgen?
Wenn ich das Problem richtig verstehe, gibt es dafür eine spezielle Vorgehensweise.
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.