Ist dies noch die Lösung zum Überprüfen des Dark Mode?

Entwickler
1

Weiterführung der Diskussion von Keine spezifische Klasse für den Dunkelmodus:

Ich habe eine Theme-Komponente, die das Website-Logo basierend auf der Kategorie ändert, in der sich der Benutzer befindet, und Logos zu den Kategorien in der Seitenleiste hinzufügt. Jetzt möchten sie im Dunkelmodus ein anderes Logo verwenden.

So etwas:

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

Ich bin schrecklich in CSS, aber es scheint einfacher zu sein, wenn es eine “this-is-dark-mode”-Klasse gäbe. Oder vielleicht kann das oben Genannte funktionieren.

Oder vielleicht wäre es, wenn dies eine “echte” Theme-Komponente mit Einstellungen wäre (im Moment ist sie nur wie oben von Hand codiert), dann wäre es einfach genug, diese Einstellungen in das CSS einzufügen. Das scheint sowieso das zu sein, was ich tun sollte, oder?

6 „Gefällt mir“
2

Zufälligerweise ist das etwas, das wir diese Woche intern besprochen haben! Einige Proof-of-Concept-PRs sind hier:

Beachten Sie, dass dies nur Experimente sind, die uns beim Nachdenken helfen – es gibt keine Garantie, dass eine davon zusammengeführt wird.

Was „jetzt“ betrifft, ist die beste Option wahrscheinlich die Verwendung der LightDarkImg-Komponente wie folgt:

8 „Gefällt mir“
3

Das ergibt Sinn. Ich hatte einmal dasselbe Problem, aber @david, das hätte für mich funktioniert.
Wären Schwierigkeiten bei der Vergabe von Abzeichen auch ein Fehler oder etwas anderes?

2 „Gefällt mir“
4

Könnte ein Fehler sein, aber wir bräuchten mehr Details, um das eine oder andere zu wissen – es steht auch nicht im Zusammenhang mit diesem Thema, daher wäre es am besten, nach dem Problem zu suchen und, wenn Sie keine Antwort finden, ein neues Thema zu eröffnen, in dem Sie Schritt für Schritt erklären, was Sie versuchen und wo es fehlschlägt.

5 „Gefällt mir“
5

Eine reine CSS-Lösung würde wahrscheinlich die CSS-Variable --scheme-type oder sogar die vor wenigen Stunden hinzugefügte color-scheme-Eigenschaft (woo!) mit @container-Style-Queries oder light-dark() verwenden.

Leider funktioniert light-dark() nur mit Farbwerten. Möglicherweise können Sie @container-Style-Queries verwenden, die auf die color-scheme-Eigenschaft abzielen (Firefox unterstützt Style-Queries für benutzerdefinierte Eigenschaften noch nicht). Ich konnte die Idee noch nicht testen, da meine Entwicklungsumgebung derzeit ausgefallen ist.

Eine dedizierte .dark-mode- oder .light-mode-Klasse im Stammverzeichnis wäre definitiv am einfachsten zu handhaben.

6 „Gefällt mir“