Как добавить поддержку тёмного режима в тему WordPress: практическое руководство

Автор: Владимир Ершов | Опубликовано: 28.01.2026

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

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

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

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

Способы добавить тёмный режим в WordPress тему

1. Использование CSS media query `prefers-color-scheme`

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

Добавьте в файл стилей вашей темы следующий код:

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

/* Тёмный режим */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #e0e0e0;
    }
    a {
        color: #82aaff;
    }
}

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

2. Добавление переключателя тёмного режима с сохранением выбора

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

Пример простого переключателя с использованием JavaScript и CSS:

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

<script>
document.getElementById('wp-themes-dark-mode-toggle').addEventListener('click', function() {
    let body = document.body;
    if(body.classList.contains('dark-mode')) {
        body.classList.remove('dark-mode');
        localStorage.setItem('wpThemesDarkMode', 'light');
    } else {
        body.classList.add('dark-mode');
        localStorage.setItem('wpThemesDarkMode', 'dark');
    }
});

window.addEventListener('load', function() {
    if(localStorage.getItem('wpThemesDarkMode') === 'dark') {
        document.body.classList.add('dark-mode');
    }
});
</script>

Добавьте в CSS стили для класса dark-mode:

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

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

3. Использование плагинов для тёмного режима

Если не хочется писать код, можно использовать готовые плагины. Вот несколько популярных вариантов:

WP Dark Mode — один из самых популярных бесплатных плагинов, который добавляет переключатель тёмного режима и автоматически применяет стили.
Darklup Lite — легкий плагин с простыми настройками и возможностью кастомизации цветов.
WPGPT Dark Mode — если используете продукты WPGPT, этот плагин хорошо интегрируется и позволяет добавлять тёмный режим с минимальными усилиями.

Все они позволяют быстро внедрить тёмный режим, но при этом могут увеличивать нагрузку на сайт. Лучше всего комбинировать плагины с собственными стилями.

Особенности реализации тёмного режима в темах WordPress

1. Оптимизация стилей и производительности

При добавлении тёмного режима важно не дублировать стили, а писать их максимально компактно и использовать CSS-переменные. Это облегчит поддержку и ускорит загрузку.

Например, в :root задайте переменные для цветов:

:root {
    --bg-color-light: #ffffff;
    --text-color-light: #111111;
    --bg-color-dark: #121212;
    --text-color-dark: #e0e0e0;
}

body {
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--bg-color-dark);
        color: var(--text-color-dark);
    }
}

2. Поддержка сторонних плагинов и элементов

При использовании популярных плагинов (например, WooCommerce, Contact Form 7, или визуальных конструкторов) нужно проверить, как они выглядят в тёмной теме. Иногда требуется добавлять дополнительные стили, чтобы корректно отображать формы, кнопки и виджеты.

Например, для WooCommerce можно добавить:

@media (prefers-color-scheme: dark) {
    .woocommerce div.product .summary {
        color: #e0e0e0;
    }
    .woocommerce a.button {
        background-color: #333333;
        color: #fff;
    }
}

3. Тестирование и отладка

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

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

Пример интеграции Dark Mode в тему Reboot от WPShop

Если вы используете тему Reboot, то добавить тёмный режим можно следующим образом:

В functions.php добавьте подключение дополнительного CSS файла для тёмной темы:

function wpthemes_enqueue_dark_mode_styles() {
    wp_enqueue_style('dark-mode-style', get_template_directory_uri() . '/dark-mode.css', array(), '1.0');
}
add_action('wp_enqueue_scripts', 'wpthemes_enqueue_dark_mode_styles');

Создайте файл dark-mode.css в папке темы с необходимыми стилями для тёмного режима, используя prefers-color-scheme и класс dark-mode.
Добавьте переключатель в шапку сайта (header.php):

<button id="dark-mode-toggle" aria-label="Переключить тёмный режим">🌓</button>

<script>
document.getElementById('dark-mode-toggle').addEventListener('click', function() {
    document.body.classList.toggle('dark-mode');
    if(document.body.classList.contains('dark-mode')) {
        localStorage.setItem('wpthemesDarkMode', 'dark');
    } else {
        localStorage.setItem('wpthemesDarkMode', 'light');
    }
});

window.addEventListener('load', function() {
    if(localStorage.getItem('wpthemesDarkMode') === 'dark') {
        document.body.classList.add('dark-mode');
    }
});
</script>

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

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

Добавление поддержки тёмного режима в тему WordPress — несложная, но важная задача, которая улучшает UX и делает сайт современным. Используйте возможности CSS prefers-color-scheme для автоматического переключения, дополняйте переключателем на JavaScript для контроля пользователя. Не забывайте тестировать и оптимизировать стили.

Если хотите быстро и без кода — обратите внимание на плагин WP Dark Mode от WPShop, который отлично интегрируется с темами Reboot и Root, позволяя без усилий добавить эту функцию.

Как добавить поддержку тёмного режима в тему WordPress