Bara en snabb notis för att berätta att vi idag har lagt till ett anpassat mörkt läge med en temaväljare till höger om toppmenyn.
Den automatiska implementeringen(prefers-color-scheme) har ersatts av en hantering baserad på [data-theme="dark"] -väljaren som gör det möjligt att visa det mörka temat när användaren väljer det i sin webbläsare. Vissa, som Opera, har ett"force dark mode"-alternativ som ger en ganska bra mörk version, men med vissa buggar som att invertera bilder så att de visas i negativ och att det inte går att konfigurera något.
Jag har valt att använda HTML och JS infogat med GeneratePress-element och CSS i en lång snutt med alla anteckningar för att ha en fullständig lista över vad som har justerats om jag vill förbättra det eller ändra det någon gång, samt ha total kontroll över laddningen av stilar och en absolut visuell konsekvens på hela webbplatsen.
Det här är de viktigaste förbättringarna jämfört med den automatiska versionen:
- Renderingsoptimering: Eliminering av flimmer och konflikter genom en enhetlig CSS-stilhierarki som säkerställer omedelbar laddning av det mörka temat.
- Visuell konsekvens: Exakt justering av färger och filter på dynamiska element (GenerateBlocks, Query Loops, flikar och dragspel) för att undvika problem med läsbarheten (grå färger på vit bakgrund).
- Kontroll av dynamiska element: Korrigering av blandningsfilter
(mix-blend-mode)och opacitet i bilder och menyer, vilket säkerställer att element som Polylang-ikonen eller korten på dokumentärsidan behåller sin korrekta kontrast under alla förhållanden. - Teknisk upprensning: Felsökning av överflödiga väljare och förenhetligande av CSS-regler för att underlätta framtida underhåll utan att påverka prestanda och CLS.
Detta, som också kan göras med ett plugin, med de logiska begränsningarna, har jag beslutat att göra det med kod, inte bara för att spara mig ett plugin, utan också för att ha granulär kontroll och finjustering för varje liten detalj och för att kunna agera på den möjliga inverkan det kan ha på laddningshastigheten.
Om någon är intresserad av koden, vilket inte heller är någon stor sak, är det bara att vissla så lägger jag upp den här. Om du är en av dem som tycker om att surfa på den mörka webben och hittar något som kan förbättras, lämna gärna en kommentar eller klicka hårt på den gula "Rapportera bugg"-knappen längst ner i varje inlägg.
Jag vill också påminna om att jag arbetar med optimering av WordPress och ibland även med migreringar och anpassningar till GeneratePress-mallar med GenerateBlocks-block.
