Лише коротенько повідомляємо, що сьогодні ми додали користувацький темний режим з перемикачем тем праворуч у верхньому меню.
Автоматичне застосування(prefers-color-scheme) було замінено керуванням на основі селектора [data-theme="dark"], який дозволяв відображати темну тему, коли користувач вибирав її у своєму браузері. У деяких браузерах, таких як Opera, є опція"примусовий темний режим", яка малює досить пристойну темну версію, але з деякими помилками, такими як інвертування зображень, показуючи їх у негативному світлі і не дозволяючи нічого налаштувати.
Я вирішив використовувати HTML і JS, вставлені з елементами GeneratePress і CSS в довгий фрагмент з усіма анотаціями, щоб мати повний список того, що було скориговано, на випадок, якщо я захочу коли-небудь поліпшити або змінити його, а також мати повний контроль над завантаженням стилів і абсолютну візуальну узгодженість на всьому веб-сайті.
Це основні покращення порівняно з автоматичною версією:
- Оптимізація рендерингу: Усунення мерехтіння та конфліктів завдяки уніфікованій ієрархії стилів CSS, яка забезпечує миттєве завантаження темної теми.
- Візуальна узгодженість: точне налаштування кольорів і фільтрів для динамічних елементів (GenerateBlocks, цикли запитів, вкладки та акордеони), щоб уникнути проблем з читабельністю (сірі кольори на білому фоні).
- Контроль динамічних елементів: корекція фільтрів змішування
(режим mix-blend) і непрозорості в зображеннях і меню, гарантуючи, що такі елементи, як піктограма Polylang або картки на сторінці документального фільму, зберігають правильну контрастність за будь-яких умов. - Технічне очищення: Налагодження надлишкових селекторів та уніфікація правил CSS для полегшення подальшого обслуговування без впливу на продуктивність та CLS.
Це також можна зробити за допомогою плагіна, але з логічними обмеженнями, я вирішив зробити це за допомогою коду, щоб не тільки заощадити на плагіні, але й мати детальний контроль і точне налаштування будь-якої дрібниці, а також мати можливість впливати на можливий вплив, який вона може мати на швидкість завантаження.
Якщо когось зацікавить код, що теж не є проблемою, просто свистіть, і я опублікую його тут. Якщо ви один з тих, хто полюбляє серфінг в темній павутині і знайшов щось, що можна покращити, не соромтеся залишити коментар або сильно натиснути на жовту кнопку "Повідомити про помилку" внизу будь-якого допису.
Користуючись нагодою, хочу нагадати, що я займаюся оптимізацією WordPress і, час від часу, міграцією та адаптацією шаблонів GeneratePress за допомогою блоків GenerateBlocks.
