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