Чтобы добавить переключатель “день/ночь” (темный/светлый режим) на сайт WordPress с использованием Bootstrap 5, можно использовать JavaScript для переключения темы и сохранить выбор пользователя в localStorage, чтобы настройка сохранялась между сессиями.

Вот шаги для реализации этого переключателя:

1. Добавление кнопки переключателя в шаблон

Добавьте HTML-кнопку переключения в нужное место вашего шаблона, например, в файл header.php:

<button id="themeToggle" class="btn btn-secondary">🌙</button>

2. Добавление JavaScript для переключения тем

Вставьте следующий JavaScript код в файл footer.php или подключите отдельный файл JavaScript, который будет отвечать за логику переключения:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const htmlElement = document.documentElement;
    const themeToggle = document.getElementById('themeToggle');

    // Получаем текущую тему из localStorage или устанавливаем тему по умолчанию (light)
    const currentTheme = localStorage.getItem('theme') || 'light';
    htmlElement.setAttribute('data-bs-theme', currentTheme);

    // Меняем иконку на кнопке в зависимости от темы
    themeToggle.textContent = currentTheme === 'dark' ? '🌞' : '🌙';

    // Функция переключения темы
    themeToggle.addEventListener('click', function () {
        const newTheme = htmlElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
        htmlElement.setAttribute('data-bs-theme', newTheme);
        localStorage.setItem('theme', newTheme);

        // Меняем иконку в зависимости от текущей темы
        themeToggle.textContent = newTheme === 'dark' ? '🌞' : '🌙';
    });
});
</script>

3. Добавление стилей для темного и светлого режимов

Теперь необходимо определить стили для обоих режимов. В файле style.css или другом файле стилей добавьте следующее:

/* Стили для светлого режима (по умолчанию) */
body[data-bs-theme='light'] {
    background-color: #fff;
    color: #000;
}

/* Стили для темного режима */
body[data-bs-theme='dark'] {
    background-color: #121212;
    color: #fff;
}

a[data-bs-theme='dark'] {
    color: #ffcc00;
}

/* Дополнительные стили для других элементов */
.navbar[data-bs-theme='dark'] {
    background-color: #333;
}

.navbar[data-bs-theme='light'] {
    background-color: #f8f9fa;
}

4. Пример подключения стилей Bootstrap

Если Bootstrap 5 еще не подключен к вашему сайту, подключите его в header.php:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

5. Сохранение темы между сессиями

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

6. (Опционально) Добавление классов Bootstrap для кнопки

Вы можете добавить дополнительные стили для кнопки с помощью классов Bootstrap, например, сделать кнопку круговой или добавить отступы:

#themeToggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    padding: 10px;
    border-radius: 50%;
}

Итог

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