Само една кратка бележка, за да ви съобщим, че днес добавихме потребителски тъмен режим с избор на тема вдясно от горното меню.
Автоматичното изпълнение(prefers-color-scheme) беше заменено с управление, базирано на селектора [data-theme="dark"], което позволяваше тъмната тема да се показва, когато потребителят я избере в браузъра си. Някои от тях, като Opera, имат опция"force dark mode" (насилствено въвеждане на тъмен режим), която изобразява доста прилична тъмна версия, но с някои грешки, като инвертиране на изображенията, показвайки ги в негатив, и не позволява да се конфигурира нищо.
Избрах да използвам HTML и JS, вмъкнати с елементи на GeneratePress и CSS в дълъг фрагмент с всички анотации, за да имам пълен списък на това, което е било коригирано, в случай че искам да го подобря или променя някой ден, както и да имам пълен контрол върху зареждането на стиловете и абсолютна визуална последователност в целия уебсайт.
Това са основните подобрения в сравнение с автоматичната версия:
- Оптимизиране на изобразяването: Премахване на трептенията и конфликтите чрез унифицирана йерархия на стиловете CSS, която осигурява незабавно зареждане на тъмната тема.
- Визуална съгласуваност: Прецизно регулиране на цветовете и филтрите на динамичните елементи (GenerateBlocks, Query Loops, табове и акордеони), за да се избегнат проблеми с четливостта (сиви цветове на бял фон).
- Контрол на динамичните елементи: Коригиране на филтрите за смесване
(mix-blend-mode) и непрозрачността на изображенията и менютата, като се гарантира, че елементи като иконата Polylang или картите на документалната страница поддържат правилния си контраст при всякакви условия. - Техническо изчистване: отстраняване на грешки при излишните селектори и унифициране на правилата на CSS, за да се улесни бъдещата поддръжка без въздействие върху производителността и CLS.
Това, което може да се направи и с плъгин, с логичните ограничения, реших да го направя с код, не само за да си спестя плъгин, но и за да имам гранулиран контрол и фина настройка за всеки малък детайл и да мога да действам при евентуално въздействие върху скоростта на зареждане.
Ако някой се интересува от кода, което също не е голяма работа, просто свиркайте и аз ще го публикувам тук. Ако сте от тези, които обичат да сърфират в тъмната мрежа и откриете нещо, което може да се подобри, не се колебайте да оставите коментар или да кликнете силно върху жълтия бутон "Докладвай за грешка" в долната част на всяка публикация.
Бих искал също така да се възползвам от тази възможност, за да ви напомня, че работя по оптимизацията на WordPress, а понякога и по миграцията и адаптирането на шаблони на GeneratePress с блокове на GenerateBlocks.
