Len krátka poznámka, aby sme vás informovali, že sme dnes pridali vlastný tmavý režim s výberom témy vpravo od horného menu.
Automatická implementácia(prefers-color-scheme) bola nahradená správou založenou na selektore [data-theme="dark"], ktorý umožnil zobrazenie tmavej témy, keď si ju používateľ vybral vo svojom prehliadači. Niektoré, ako napríklad Opera, majú možnosť"vynútiť tmavý režim", ktorá vykresľuje celkom slušnú tmavú verziu, ale s niektorými chybami, ako je invertovanie obrázkov, ktoré sa zobrazujú negatívne a neumožňujú nič nastaviť.
Rozhodol som sa použiť HTML a JS vložené s prvkami GeneratePress a CSS v dlhom úryvku so všetkými poznámkami, aby som mal úplný zoznam toho, čo bolo upravené v prípade, že to chcem niekedy zlepšiť alebo zmeniť, ako aj úplnú kontrolu nad načítaním štýlov a absolútnu vizuálnu konzistenciu na celom webe.
Toto sú hlavné vylepšenia v porovnaní s automatickou verziou:
- Optimalizácia vykresľovania: Odstránenie blikania a konfliktov prostredníctvom jednotnej hierarchie štýlov CSS, ktorá zabezpečuje okamžité načítanie tmavej témy.
- Vizuálna konzistentnosť: Presné nastavenie farieb a filtrov na dynamických prvkoch (GenerateBlocks, Query Loops, karty a akordeóny), aby sa predišlo problémom s čitateľnosťou (sivé farby na bielom pozadí).
- Kontrola dynamických prvkov: Korekcia filtrov prelínania
(režim mix-blend)a nepriehľadnosti v obrázkoch a ponukách, čím sa zabezpečí, že prvky, ako je ikona Polylang alebo karty na stránke dokumentov, si zachovajú správny kontrast za akýchkoľvek podmienok. - Technické vyčistenie: Odladenie nadbytočných selektorov a zjednotenie pravidiel CSS s cieľom uľahčiť budúcu údržbu bez vplyvu na výkon a CLS.
To, čo sa dá urobiť aj pomocou pluginu, s logickými obmedzeniami, Rozhodol som sa to urobiť pomocou kódu, nielen aby som si ušetril plugin, ale aj aby som mal granulárnu kontrolu a jemné ladenie pre každý malý detail a aby som mohol konať na možný vplyv, ktorý môže mať na rýchlosť načítania.
Ak má niekto záujem o kód, čo tiež nie je žiadna veľká vec, stačí písknuť a ja ho tu zverejním. Ak patríte k tým, ktorí radi surfujú po temnom webe a nájdete niečo, čo by sa dalo vylepšiť, neváhajte zanechať komentár alebo tvrdo kliknite na žlté tlačidlo "Nahlásiť chybu" v spodnej časti každého príspevku.
Rád by som vám tiež pripomenul, že robím optimalizáciu WordPress a príležitostne aj migrácie a úpravy šablón GeneratePress s blokmi GenerateBlocks.
