Krótko informujemy, że dodaliśmy dziś niestandardowy tryb ciemny z selektorem motywów po prawej stronie górnego menu.
Automatyczna implementacja(prefers-color-scheme) została zastąpiona zarządzaniem opartym na selektorze [data-theme="dark"], który pozwalał na wyświetlanie ciemnego motywu, gdy użytkownik wybrał go w swojej przeglądarce. Niektóre, takie jak Opera, mają opcję"wymuś tryb ciemny", która maluje całkiem przyzwoitą ciemną wersję, ale z pewnymi błędami, takimi jak odwracanie obrazów, pokazując je w negatywie i nie pozwalając na konfigurację czegokolwiek.
Zdecydowałem się użyć HTML i JS wstawionych z elementami GeneratePress i CSS w długim snippecie ze wszystkimi adnotacjami, aby mieć pełną listę tego, co zostało dostosowane na wypadek, gdybym chciał to kiedyś poprawić lub zmienić, a także mieć całkowitą kontrolę nad ładowaniem stylów i absolutną spójność wizualną w całej witrynie.
Są to główne ulepszenia w porównaniu do wersji automatycznej:
- Optymalizacja renderowania: Eliminacja migotania i konfliktów dzięki ujednoliconej hierarchii stylów CSS, która zapewnia natychmiastowe ładowanie ciemnego motywu.
- Spójność wizualna: Precyzyjne dostosowanie kolorów i filtrów na elementach dynamicznych (GenerateBlocks, Query Loops, zakładki i akordeony) w celu uniknięcia problemów z czytelnością (szare kolory na białym tle).
- Kontrola elementów dynamicznych: Korekta filtrów mieszania
(tryb mix-blend) i nieprzezroczystości obrazów i menu, zapewniająca, że elementy takie jak ikona Polylang lub karty na stronie dokumentu zachowują prawidłowy kontrast w każdych warunkach. - Czyszczenie techniczne: Debugowanie zbędnych selektorów i ujednolicenie reguł CSS w celu ułatwienia przyszłej konserwacji bez wpływu na wydajność i CLS.
To, co można również zrobić za pomocą wtyczki, z logicznymi ograniczeniami, postanowiłem zrobić to za pomocą kodu, nie tylko po to, aby zaoszczędzić sobie wtyczki, ale także aby mieć szczegółową kontrolę i precyzyjne dostrajanie każdego drobnego szczegółu oraz aby móc działać w przypadku możliwego wpływu na szybkość ładowania.
Jeśli ktoś jest zainteresowany kodem, co też nie jest wielką sprawą, po prostu gwizdnij, a opublikuję go tutaj. Jeśli jesteś jednym z tych, którzy lubią surfować po ciemnej sieci i znaleźć coś, co można poprawić, nie krępuj się zostawić komentarz lub kliknij mocno na żółty przycisk "Zgłoś błąd" na dole każdego postu.
Chciałbym również skorzystać z okazji, aby przypomnieć, że zajmuję się optymalizacją WordPressa, a od czasu do czasu migracjami i adaptacjami do szablonów GeneratePress z blokami GenerateBlocks.
