Как добавить поддержку Dark Mode в тему WordPress: пошаговое руководство

В последние годы тёмный режим (Dark Mode) становится всё более популярным среди пользователей, поскольку он снижает нагрузку на глаза и экономит заряд батареи на мобильных устройствах. В этой статье мы подробно разберём, как добавить поддержку Dark Mode в тему WordPress, используя современные методы и лучшие практики. Вы увидите примеры CSS, JavaScript и PHP-кода, а также рекомендации по совместимости с плагинами и оптимизации.

Почему стоит добавить Dark Mode в тему WordPress

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

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

Давайте рассмотрим, как это реализовать с технической точки зрения.

Добавление базовой поддержки Dark Mode через CSS

Самый простой способ — использовать медиа-запрос prefers-color-scheme, который позволяет автоматически переключаться на тёмный режим, если пользователь настроил систему или браузер соответствующим образом.

/* Светлая тема по умолчанию */
body {
    background-color: #fff;
    color: #111;
}

/* Тёмная тема */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #eee;
    }
    a {
        color: #9ecfff;
    }
    /* Добавьте другие стили для тёмного режима */
}

Этот метод не требует JavaScript и позволяет автоматически подстраиваться под системные настройки. Но что делать, если вы хотите предоставить пользователю возможность переключать тему вручную?

Реализация переключателя Dark Mode с сохранением выбора пользователя

Для переключения между светлой и тёмной темами на сайте создадим кнопку, которая будет менять класс у <body> и сохранять выбор в localStorage. Это позволит при обновлении страницы сохранить выбранный режим.

HTML и JavaScript для переключателя

<button id="wp-theme-toggle-dark-mode">Тёмный режим</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggleButton = document.getElementById('wp-theme-toggle-dark-mode');
    const body = document.body;

    // Функция применения темы
    function wpThemeApplyDarkMode(enabled) {
        if (enabled) {
            body.classList.add('wp-theme-dark-mode');
        } else {
            body.classList.remove('wp-theme-dark-mode');
        }
    }

    // Загрузка настройки из localStorage
    const darkModeSetting = localStorage.getItem('wpThemeDarkMode');
    if (darkModeSetting === 'enabled') {
        wpThemeApplyDarkMode(true);
    } else if (darkModeSetting === 'disabled') {
        wpThemeApplyDarkMode(false);
    } else {
        // Если нет сохранённого значения, применяем системное
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        wpThemeApplyDarkMode(prefersDark);
    }

    // Обработчик кнопки
    toggleButton.addEventListener('click', function() {
        const isDark = body.classList.toggle('wp-theme-dark-mode');
        localStorage.setItem('wpThemeDarkMode', isDark ? 'enabled' : 'disabled');
    });
});
</script>

CSS для класса тёмной темы

.wp-theme-dark-mode {
    background-color: #121212;
    color: #eee;
}
.wp-theme-dark-mode a {
    color: #9ecfff;
}
/* Добавьте остальные стили для темной темы */

Обратите внимание, что базовые стили для body (светлая тема) задаются в обычном CSS, а тёмная тема — через класс wp-theme-dark-mode, который мы динамически добавляем или убираем.

Интеграция Dark Mode в тему WordPress: добавление в functions.php

Чтобы подключить стили и скрипты корректно, добавим их через functions.php вашей темы. Это позволит избежать проблем с кэшированием и конфликтами.

function wp_theme_enqueue_dark_mode_assets() {
    wp_enqueue_style('wp-theme-dark-mode-style', get_template_directory_uri() . '/css/dark-mode.css', [], '1.0');

    wp_enqueue_script('wp-theme-dark-mode-script', get_template_directory_uri() . '/js/dark-mode-toggle.js', [], '1.0', true);
}
add_action('wp_enqueue_scripts', 'wp_theme_enqueue_dark_mode_assets');

Создайте файлы dark-mode.css и dark-mode-toggle.js в папках css и js вашей темы соответственно и поместите туда код из примеров выше.

Поддержка Dark Mode в популярных плагинах и библиотеках

Если вы используете плагины с пользовательскими интерфейсами (например, Clearfy Pro) или визуальные конструкторы, важно проверить, как они работают с тёмной темой. Некоторые плагины имеют собственные настройки для Dark Mode или позволяют добавлять кастомные стили.

Для плагинов без встроенной поддержки рекомендуем:

Использовать CSS-переменные для цветов, чтобы централизованно менять цветовую схему.
Добавлять стили плагинов внутри блока .wp-theme-dark-mode, чтобы не ломать светлую тему.
Тестировать переключение тем с включёнными плагинами на разных страницах.

Продвинутые возможности: переключение Dark Mode через PHP и AJAX

Если вы хотите хранить выбор пользователя на сервере (например, в профиле пользователя), можно реализовать переключение с помощью AJAX и PHP. Это особенно полезно для сайтов с регистрацией.

Пример AJAX-обработчика в functions.php

add_action('wp_ajax_wp_theme_toggle_dark_mode', 'wp_theme_toggle_dark_mode_handler');
function wp_theme_toggle_dark_mode_handler() {
    if (!is_user_logged_in()) {
        wp_send_json_error('User not logged in');
        wp_die();
    }
    $enabled = isset($_POST['enabled']) && $_POST['enabled'] === 'true' ? true : false;
    $user_id = get_current_user_id();
    update_user_meta($user_id, 'wp_theme_dark_mode', $enabled ? 1 : 0);
    wp_send_json_success(['enabled' => $enabled]);
    wp_die();
}

Загрузка темы при входе пользователя

function wp_theme_apply_user_dark_mode() {
    if (is_user_logged_in()) {
        $user_id = get_current_user_id();
        $enabled = get_user_meta($user_id, 'wp_theme_dark_mode', true);
        if ($enabled == 1) {
            echo '<script>document.body.classList.add("wp-theme-dark-mode");</script>';
        }
    }
}
add_action('wp_footer', 'wp_theme_apply_user_dark_mode');

В JavaScript нужно будет отправлять AJAX-запрос при переключении и обрабатывать ответ сервера.

Советы по оптимизации и тестированию Dark Mode в теме

Чтобы Dark Mode работал корректно и не вызывал проблем, рекомендуем:

Использовать CSS-переменные для цветов, чтобы легко менять палитру.
Проверять контрастность и читаемость текста в тёмной теме.
Тестировать сайт на разных устройствах и браузерах.
Обращать внимание на изображения: для тёмного режима могут понадобиться альтернативные версии.
Использовать инструменты разработчика браузера для эмуляции prefers-color-scheme.

Если хотите упростить разработку, можно использовать тему Reboot от WPSHOP, которая имеет встроенную поддержку Dark Mode и адаптивных настроек.

Заключение

Добавление поддержки Dark Mode в тему WordPress — это несложный, но очень полезный шаг для улучшения юзабилити вашего сайта. Начинайте с простых CSS-медиа-запросов, а затем при необходимости расширяйте функционал переключателем и сохранением выбора пользователя. Используйте приведённые примеры кода и рекомендации, чтобы сделать ваш сайт современным и удобным для посетителей.