Richtige Methode zum Bearbeiten von CSS für Helle und Dunkle Modi

Unterstützung
1

Ich muss eine Menge CSS für die hellen und dunklen Modi bearbeiten. Ich habe einige Forenbeiträge gelesen, in denen steht, dass es keine zuverlässige Methode dafür gibt, einschließlich

Allerdings sind viele dieser Beiträge bereits älteren Datums. Gibt es 2026 eine einfache Lösung? Ich habe Folgendes getestet:

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

Ich bin mir nicht sicher, ob das korrekt ist, aber es funktioniert.

2

Die Container-Abfrage funktioniert, aber zur Vereinfachung können Sie auch die native light-dark()-Funktion in CSS verwenden:

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}

In der Regel verlassen wir uns in Discourse auf Farbvariablen, die sich automatisch ändern, um spezifische Farben auf diese Weise zu vermeiden (--primary, --secondary usw.)… Dies ermöglicht es, dass Farben unabhängig vom Farbschema funktionieren.

Sie können einige Beispiele hier sehen: https://meta.discourse.org/styleguide/atoms/colors und wie sie sich ändern, wenn Sie zum dunklen/hellen Modus wechseln. Diese Variablen werden durch Farbpaletten in /admin/config/colors eingerichtet.

3

Super, vielen Dank, Kris. Übrigens funktioniert dieser Link nicht.