В современном веб-разработке становится все более популярным предоставлять пользователям возможность выбирать между светлой и темной темой на сайте. В этой статье мы рассмотрим, как создать сайт с поддержкой темной и светлой темы с использованием CSS и JavaScript.
Содержание
- Создание основной структуры сайта
- Настройка CSS переменных для тем
- Создание переключателя тем
- Использование JavaScript для переключения тем
1. Создание основной структуры сайта
Для начала создадим простую HTML-структуру сайта:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="theme-switcher.js" defer></script>
<title>Темная и светлая тема</title>
</head>
<body>
<header>
<h1>Мой сайт</h1>
<button id="theme-switcher">Переключить тему</button>
</header>
<main>
<p>Здесь будет основной контент сайта.</p>
</main>
</body>
</html>
2. Настройка CSS переменных для тем
Теперь создадим файл styles.css и зададим переменные для светлой и темной тем:
:root {
--primary-bg-color: #ffffff;
--secondary-bg-color: #f0f0f0;
--primary-text-color: #000000;
--secondary-text-color: #333333;
}
[data-theme="dark"] {
--primary-bg-color: #1a1a1a;
--secondary-bg-color: #333333;
--primary-text-color: #ffffff;
--secondary-text-color: #cccccc;
}
body {
background-color: var(--primary-bg-color);
color: var(--primary-text-color);
}
header {
background-color: var(--secondary-bg-color);
color: var(--secondary-text-color);
}
Здесь мы используем CSS-переменные для определения цветовых схем для светлой и темной тем. Это позволяет нам легко изменять цвета элементов при переключении темы.
3. Создание переключателя тем
Теперь добавим кнопку для переключения темы на наш сайт. Мы уже добавили кнопку с id="theme-switcher" в наш HTML-файл. Теперь стилизуем ее в styles.css:
button#theme-switcher {
background-color: var(--secondary-bg-color);
color: var(--secondary-text-color);
border: none;
padding: 8px 16px;
cursor: pointer;
}
button#theme-switcher:hover {
background-color: var(--primary-text-color);
color: var(--primary-bg-color);
}
4. Использование JavaScript для переключения тем
Теперь создадим файл theme-switcher.js для обработки переключения тем при клике на кнопку:
const themeSwitcher = document.getElementById("theme-switcher");
themeSwitcher.addEventListener("click", () => {
const currentTheme = document.documentElement.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
document.documentElement.setAttribute("data-theme", newTheme);
});
Здесь мы прослушиваем событие клика на кнопке переключателя темы и при клике меняем атрибут data-theme у элемента <html>. Это приводит к обновлению CSS-переменных, и сайт изменяет свою тему.
🎉 Теперь у вас есть сайт с поддержкой темной и светлой темы. Вы можете продолжить развивать свой сайт, добавляя больше элементов и стилизуя их с использованием CSS-переменных, чтобы они корректно отображались в обеих темах.
Добавить комментарий