Nur eine kurze Nachricht, um Ihnen mitzuteilen, dass wir heute einen benutzerdefinierten dunklen Modus mit einer Themenauswahl auf der rechten Seite des oberen Menüs hinzugefügt haben .
Die automatische Implementierung(prefers-color-scheme) wurde durch eine Verwaltung auf der Grundlage des [data-theme="dark"] -Selektors ersetzt, der die Anzeige des dunklen Themas ermöglicht, wenn der Benutzer es in seinem Browser auswählt. Einige, wie z.B. Opera, haben eine"force dark mode"-Option, die eine ziemlich anständige dunkle Version malt, aber mit einigen Fehlern, wie z.B. die Invertierung von Bildern, die sie negativ darstellen und nicht erlauben, etwas zu konfigurieren.
Ich habe mich für die Verwendung von HTML und JS entschieden, die mit GeneratePress-Elementen und CSS in einem langen Snippet mit allen Anmerkungen eingefügt wurden, um eine vollständige Liste dessen zu haben, was angepasst wurde, für den Fall, dass ich es eines Tages verbessern oder ändern möchte, sowie um die totale Kontrolle über das Laden der Stile und eine absolute visuelle Konsistenz auf der gesamten Website zu haben.
Dies sind die wichtigsten Verbesserungen gegenüber der automatischen Version:
- Rendering-Optimierung: Beseitigung von Flackern und Konflikten durch eine einheitliche CSS-Stilhierarchie, die das sofortige Laden des dunklen Themas gewährleistet.
- Visuelle Konsistenz: Präzise Anpassung von Farben und Filtern auf dynamischen Elementen (GenerateBlocks, Query Loops, Tabs und Akkordeons), um Lesbarkeitsprobleme zu vermeiden (graue Farben auf weißem Hintergrund).
- Kontrolle dynamischer Elemente: Korrektur von Überblendungsfiltern
(Mix-Blend-Modus) und Opazitäten in Bildern und Menüs, um sicherzustellen, dass Elemente wie das Polylang-Symbol oder die Karten auf der Dokumentenseite unter allen Bedingungen den richtigen Kontrast behalten. - Technische Bereinigung: Beseitigung redundanter Selektoren und Vereinheitlichung der CSS-Regeln, um die künftige Wartung ohne Auswirkungen auf die Leistung und das CLS zu erleichtern.
Dies kann auch mit einem Plugin gemacht werden, mit den logischen Einschränkungen, habe ich beschlossen, es mit Code zu tun, nicht nur, um mir ein Plugin zu sparen, sondern auch, um granulare Kontrolle und Feinabstimmung für jedes kleine Detail zu haben und in der Lage zu sein, auf die möglichen Auswirkungen auf die Ladegeschwindigkeit zu handeln.
Wenn jemand an dem Code interessiert ist, was auch keine große Sache ist, pfeift einfach und ich werde ihn hier posten. Wenn Sie zu denjenigen gehören, die gerne im Dark Web surfen und etwas finden, das verbessert werden könnte, können Sie gerne einen Kommentar hinterlassen oder auf den gelben "Fehler melden"-Button am Ende jedes Beitrags klicken.
Ich möchte Sie auch daran erinnern, dass ich WordPress-Optimierungen und gelegentlich auch Migrationen und Anpassungen an GeneratePress-Templates mit GenerateBlocks-Blöcken durchführe.
