Без лишних слов создадим простой переключатель для светлой и темной темы с использованием HTML, CSS и JavaScript. Нам понадобятся три файла — index.html, styles.css и script.js.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

HTML

Основная разметка страницы — заголовок, абзац текста, список и текст в рамке.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Переключатель темы</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button id="themeToggle">Переключить тему</button>
    <h1>Заголовок</h1>
    <p>Абзац текста. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <ul>
        <li>Элемент списка 1</li>
        <li>Элемент списка 2</li>
        <li>Элемент списка 3</li>
    </ul>
    <div class="boxed-text">
        Блок текста в рамке.
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

Здесь задаём цвета для светлой и тёмной темы, а ещё минимальную стилизацию текста и блока с рамкой.

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

body.light-theme {
    background-color: #ffffff;
    color: #000000;
}

body.dark-theme {
    background-color: #121212;
    color: #ffffff;
}

.boxed-text {
    border: 2px solid currentColor;
    padding: 15px;
    margin-top: 20px;
}

JavaScript (script.js)

Этот код нужен, чтобы переключать тему при нажатии на кнопку:

document.getElementById('themeToggle').addEventListener('click', function() {
    const currentTheme = document.body.className;
    if (currentTheme === 'light-theme') {
        document.body.className = 'dark-theme';
    } else {
        document.body.className = 'light-theme';
    }
});

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

Разбираем CSS

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

body {
    /* Задаем шрифт для текста на всей странице */
    font-family: Arial, sans-serif;

    /* Добавляем плавный переход для изменения цвета фона. 
    Это сделано для того, чтобы при переключении темы фон менялся плавно */
    transition: background-color 0.3s ease;
}

Определяем стили для светлой темы. У нас очень простой пример, так что будем менять только цвет фона и цвет текста.

body.light-theme {
    /* Цвет фона для светлой темы — чёрный */
    background-color: #ffffff;

    /* Основной цвет текста для светлой темы — белый*/
    color: #000000;
}

Стили для тёмной темы — меняются цвет фона и цвет текста.

/* Темная тема */
body.dark-theme {
    /* Цвет фона для темной темы */
    background-color: #121212;

    /* Основной цвет текста для темной темы */
    color: #ffffff;
}

Разбираем JS

Здесь вообще без лишних комментариев.

document.getElementById('themeToggle').addEventListener('click', function() {
    // Этот код будет выполняться при каждом клике на кнопку

    // Получаем текущий класс, заданный для элемента body (текущую тему)
    const currentTheme = document.body.className;

    // Проверяем, является ли текущая тема светлой
    if (currentTheme === 'light-theme') {
        // Если да, меняем тему на темную
        document.body.className = 'dark-theme';
    } else {
        // Если текущая тема не светлая (или отсутствует), устанавливаем светлую тему
        document.body.className = 'light-theme';
    }
});

Вот и всё! Заботьтесь о пользователях и они ответят вам тем же. 🐈