Even snel een berichtje om je te laten weten dat we vandaag een aangepaste donkere modus hebben toegevoegd met een themakiezer rechts van het bovenste menu.
De automatische implementatie(prefers-color-scheme) is vervangen door een beheer gebaseerd op de [data-theme="dark"] selector waarmee het donkere thema kon worden weergegeven wanneer de gebruiker dit in zijn browser selecteerde. Sommige browsers, zoals Opera, hebben een optie"Forceer donkere modus" die een redelijk fatsoenlijke donkere versie weergeeft, maar met enkele bugs zoals het omkeren van afbeeldingen die ze negatief weergeven en waarmee je niets kunt configureren.
Ik heb ervoor gekozen om HTML en JS te gebruiken die zijn ingevoegd met GeneratePress-elementen en CSS in een lange snippet met alle annotaties om een volledige lijst te hebben van wat er is aangepast voor het geval ik het ooit wil verbeteren of veranderen, maar ook om totale controle te hebben over het laden van stijlen en een absolute visuele consistentie in de hele website.
Dit zijn de belangrijkste verbeteringen ten opzichte van de automatische versie:
- Optimalisatie van rendering: eliminatie van flikkeringen en conflicten door een uniforme CSS-stijlhiërarchie die ervoor zorgt dat het donkere thema onmiddellijk wordt geladen.
- Visuele consistentie: Nauwkeurige aanpassing van kleuren en filters op dynamische elementen (GenerateBlocks, Query Loops, tabbladen en accordeons) om leesbaarheidsproblemen te voorkomen (grijze kleuren op witte achtergrond).
- Controle van dynamische elementen: correctie van overvloeifilters
(mix-blend-modus) en opaciteiten in afbeeldingen en menu's, zodat elementen zoals het Polylang-pictogram of de kaarten op de documentairepagina onder alle omstandigheden hun juiste contrast behouden. - Technische opschoning: Debuggen van overbodige selectors en uniformeren van CSS-regels om toekomstig onderhoud te vergemakkelijken zonder impact op prestaties en CLS.
Dit, wat ook kan worden gedaan met een plugin, met de logische beperkingen, heb ik besloten om het met code te doen, niet alleen om mezelf een plugin te besparen, maar ook om granulaire controle en fijnafstelling te hebben voor elk klein detail en om te kunnen reageren op de mogelijke impact die het kan hebben op de laadsnelheid.
Als iemand geïnteresseerd is in de code, wat ook niet erg is, fluit dan en ik zal het hier posten. Als jij een van degenen bent die graag op het donkere web surft en iets vindt dat verbeterd kan worden, laat dan gerust een reactie achter of klik hard op de gele "Report bug" knop onderaan elke post.
Ik wil ook graag van deze gelegenheid gebruik maken om je eraan te herinneren dat ik WordPress optimalisatiewerk doe en, af en toe, migraties en aanpassingen aan GeneratePress templates met GenerateBlocks blokken.
