Как добавить поддержку плюшевого тёмного режима в GeneratePress

Тёмный режим становится всё популярнее не только в мобильных приложениях, но и на сайтах. Пользователи всё чаще хотят переключаться между светлой и тёмной темой для комфортного чтения. В этой статье я подробно расскажу, как добавить поддержку тёмного режима в тему GeneratePress с использованием современных подходов, сохраняя при этом лёгкость и производительность.

Почему важно добавить тёмный режим в GeneratePress

GeneratePress известна своей лёгкостью, скоростью и гибкостью. Однако базовая тема не содержит встроенного переключателя тёмного режима. Добавление такой функции улучшит пользовательский опыт, снизит нагрузку на глаза в тёмное время суток и повысит вовлечённость посетителей.

Кроме того, правильная реализация тёмного режима поможет оптимизировать энергопотребление на устройствах с OLED-экранами и улучшит доступность сайта.

Основные подходы к реализации тёмного режима в WordPress

Существует несколько распространённых способов добавить тёмный режим на сайт:

• Использовать CSS-переключатели с prefers-color-scheme и JavaScript для переключения;
• Добавлять классы к body для изменения стилей;
• Использовать готовые плагины с поддержкой тёмного режима;
• Создавать отдельные CSS-файлы для светлой и тёмной темы с динамической подгрузкой.

Мы разберём самый гибкий и кастомный способ — добавление переключателя с помощью JavaScript и CSS, что идеально подходит для GeneratePress.

Добавляем базовые стили тёмного режима в GeneratePress

Для начала создадим набор стилей, которые будут применяться при активном тёмном режиме. GeneratePress использует минималистичные цвета, поэтому нам нужно будет переопределить цвета фона, текста, ссылок и некоторых элементов интерфейса.

Добавьте следующий CSS в раздел «Дополнительные стили» вашего кастомайзера или в дочернюю тему:

body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

body.dark-mode a {
  color: #bb86fc;
}

body.dark-mode .main-navigation {
  background-color: #1f1f1f;
}

body.dark-mode .site-footer {
  background-color: #1a1a1a;
  color: #b0b0b0;
}

Этот базовый набор уже изменит основные цвета сайта. Конечно, для полного соответствия нужно будет добавить стили и для других элементов — кнопок, виджетов, форм.

Создаём переключатель тёмного режима с помощью JavaScript

Теперь сделаем кнопку переключения, которая позволит пользователю вручную активировать и отключать тёмный режим. Мы сохраним выбор в localStorage для запоминания между посещениями.

Добавьте следующий код в файл functions.php дочерней темы или в плагин для пользовательских функций:

function generatepressru_enqueue_dark_mode_script() {
    wp_enqueue_script('generatepressru-dark-mode', get_stylesheet_directory_uri() . '/js/dark-mode.js', [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'generatepressru_enqueue_dark_mode_script');

Создайте файл js/dark-mode.js внутри дочерней темы и вставьте туда следующий код:

(function() {
  const toggleButton = document.createElement('button');
  toggleButton.textContent = '🌙 Тёмный режим';
  toggleButton.id = 'dark-mode-toggle';
  toggleButton.style.position = 'fixed';
  toggleButton.style.bottom = '20px';
  toggleButton.style.right = '20px';
  toggleButton.style.padding = '10px 15px';
  toggleButton.style.background = '#333';
  toggleButton.style.color = '#fff';
  toggleButton.style.border = 'none';
  toggleButton.style.borderRadius = '5px';
  toggleButton.style.cursor = 'pointer';
  toggleButton.style.zIndex = '9999';

  document.body.appendChild(toggleButton);

  function generatepressruSetDarkMode(enabled) {
    if (enabled) {
      document.body.classList.add('dark-mode');
      toggleButton.textContent = '☀️ Светлый режим';
      localStorage.setItem('generatepressru-dark-mode', 'enabled');
    } else {
      document.body.classList.remove('dark-mode');
      toggleButton.textContent = '🌙 Тёмный режим';
      localStorage.setItem('generatepressru-dark-mode', 'disabled');
    }
  }

  toggleButton.addEventListener('click', () => {
    const isDark = document.body.classList.contains('dark-mode');
    generatepressruSetDarkMode(!isDark);
  });

  // Инициализация состояния при загрузке страницы
  const storedMode = localStorage.getItem('generatepressru-dark-mode');
  if (storedMode === 'enabled') {
    generatepressruSetDarkMode(true);
  } else if (storedMode === 'disabled') {
    generatepressruSetDarkMode(false);
  } else {
    // Автоопределение на основе системной темы
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    generatepressruSetDarkMode(prefersDark);
  }
})();

Этот скрипт создаёт плавающую кнопку в правом нижнем углу, которая переключает класс dark-mode у body и сохраняет выбор пользователя.

Улучшаем интеграцию с GeneratePress и плагинами

Если вы используете плагины для оформления, например, Clearfy Pro для оптимизации, или Gutenberg для создания контента, стоит проверить совместимость с тёмным режимом. Часто плагины добавляют свои стили, которые могут конфликтовать с тёмной темой.

Для решения проблем можно использовать дополнительные CSS-правила с селектором body.dark-mode или создавать отдельные стили через фильтры в WordPress.

Например, чтобы добавить поддержку тёмного режима в кнопки плагина, можно добавить в кастомный CSS:

body.dark-mode .wp-block-button__link {
  background-color: #bb86fc !important;
  color: #121212 !important;
}

Полезные плагины для расширения функционала тёмного режима

Если хотите не писать код, можно использовать готовые решения. Однако они часто нагружают сайт лишним функционалом.

• Clearfy Pro: плагин для оптимизации и кастомизации, с возможностью добавления кастомных стилей и скриптов.
• WPRemark: плагин для отзывов, который можно стилизовать под тёмный режим.

Но если нужна лёгкая и быстрая реализация, мой способ с небольшим скриптом и CSS будет оптимальным.

Тестирование и отладка тёмного режима

После добавления переключателя обязательно проверьте работу сайта на разных устройствах и браузерах. Обратите внимание на:

• Читаемость текста на тёмном фоне;
• Внешний вид меню, кнопок, виджетов;
• Работу сторонних плагинов и кастомных блоков;
• Корректность сохранения выбора пользователя.

Для отладки удобно использовать инструменты разработчика в браузере и переключать класс dark-mode вручную.

Выводы и рекомендации

Добавление плюшевого тёмного режима в GeneratePress — отличный способ улучшить UX вашего сайта без потери скорости. Используйте класс dark-mode на body, добавляйте необходимые CSS-правила и управляйте переключением через JavaScript с сохранением состояния в localStorage.

Если хотите расширить функционал, обратите внимание на плагины Clearfy Pro и WPRemark, которые позволяют легко интегрировать кастомные стили и улучшить взаимодействие с пользователем.

Желаю успешной реализации и комфортного использования!