Переключатель тёмной и светлой темы на сайте: реализация на HTML/CSS/JS

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

С технической точки зрения, реализация тёмной и светлой тем опирается на комбинацию HTML, CSS и JavaScript. CSS‑переменные задают базовые цвета интерфейса, JavaScript отвечает за переключение между схемами, а HTML обеспечивает размещение управляющего элемента (кнопки или переключателя). Грамотная реализация учитывает не только визуальную составляющую, но и доступность: контрастность текста, читаемость элементов, сохранение выбора пользователя между сеансами.

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

Реализация переключения светлой темы на темную, и обратно

На страницу вашего веб-сайта, в место, где должна отображаться кнопка переключения вставьте следующий код:

<button id="themeToggleButton">Переключить тему</button>

Далее необходимо подключить файл стилей style.css со следующим содержимым:

body {
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

header button {
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 5px;
    outline: none;
    border: none;
    background-color: #007BFF;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s;
}

header button:hover {
    background-color: #0056b3;
}

/* Светлая тема (по умолчанию) */
body.light-mode {
    background-color: #fff;
    color: #333;
}

/* Тёмная тема */
body.dark-mode {
    background-color: #333;
    color: #fff;
}

/* Для примера дополнительные стили тем для кнопок */
body.dark-mode header button {
    background-color: #6c757d;
    color: white;
}

body.dark-mode header button:hover {
    background-color: #5a6268;
}

И перез закрывающим тегом </body> подключаем файл со скриптом script.js следующего содержания:

// Получаем кнопку переключателя
const themeToggleButton = document.getElementById('themeToggleButton');

// Проверяем ранее установленную тему из localStorage
if (localStorage.getItem('theme') === 'dark') {
    document.body.className = 'dark-mode';
} else {
    document.body.className = 'light-mode'; // По умолчанию используется светлый режим
}

// Обрабатываем событие клика на кнопку переключения
themeToggleButton.addEventListener('click', () => {
    if (document.body.className === 'light-mode' || !document.body.className) { // Перейти в тёмную тему
        document.body.className = 'dark-mode';
        localStorage.setItem('theme', 'dark'); // Сохраняем значение в localStorage
    } else { // Вернуться обратно в светлую тему
        document.body.className = 'light-mode';
        localStorage.setItem('theme', 'light');
    }
});

Переключатель тёмной и светлой темы — это не просто эстетическая опция, а значимый элемент пользовательского опыта.

Он позволяет:

• снизить нагрузку на глаза в условиях слабого освещения;
• сэкономить заряд батареи на устройствах с OLED‑экранами;
• удовлетворить индивидуальные предпочтения пользователей;
• повысить доступность сайта для людей с особенностями зрения.

Реализация такой функциональности — доступный шаг для любого веб-проекта. Даже базовая версия переключателя тем заметно улучшает восприятие сайта и демонстрирует внимание к потребностям аудитории. В дальнейшем систему можно развивать: добавлять автоматическое определение темы по системным настройкам, сохранять выбор в localStorage, расширять палитру цветовых схем или интегрировать тему в дизайн‑систему проекта.