JavaScript переключение на светлую/темную тему для сайта
Вот простой пример реализации переключения светлой и темной темы на сайте с использованием JavaScript, HTML и CSS.
1. 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>
<header>
<h1>Мой сайт</h1>
<button id="theme-toggle">🌙 / ☀️</button>
</header>
<main>
<p>Это пример текста на сайте.</p>
</main>
<script src="script.js"></script>
</body>
</html>2. CSS (styles.css)
/* Светлая тема по умолчанию */
:root {
--bg-color: #ffffff;
--text-color: #000000;
--button-bg: #f0f0f0;
}
/* Темная тема */
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #ffffff;
--button-bg: #333333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
button {
background-color: var(--button-bg);
color: var(--text-color);
border: 1px solid var(--text-color);
padding: 8px 12px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
}3. JavaScript (script.js)
// Получаем кнопку и корневой элемент
const themeToggleBtn = document.getElementById('theme-toggle');
const body = document.body;
// Проверяем, есть ли сохранённая тема в localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
body.setAttribute('data-theme', savedTheme);
}
// Функция переключения темы
function toggleTheme() {
const currentTheme = body.getAttribute('data-theme');
if (currentTheme === 'dark') {
body.removeAttribute('data-theme');
localStorage.setItem('theme', 'light');
} else {
body.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
}
// Назначаем обработчик на кнопку
themeToggleBtn.addEventListener('click', toggleTheme);Как это работает:
- По умолчанию используется светлая тема.
- При клике на кнопку тема переключается между светлой и тёмной.
- Выбор темы сохраняется в
localStorage, чтобы при перезагрузке страницы тема оставалась прежней. - Используются CSS-переменные для удобного управления цветами.
Обновлённый JavaScript-код, который меняет иконку кнопки в зависимости от текущей темы — 🌙 для светлой темы (переключение на тёмную) и ☀️ для тёмной темы (переключение на светлую):
Обновлённый script.js
const themeToggleBtn = document.getElementById('theme-toggle');
const body = document.body;
// Функция для установки иконки кнопки в зависимости от темы
function updateButtonIcon() {
const currentTheme = body.getAttribute('data-theme');
if (currentTheme === 'dark') {
themeToggleBtn.textContent = '☀️'; // Солнце — переключить на светлую
} else {
themeToggleBtn.textContent = '🌙'; // Луна — переключить на тёмную
}
}
// Проверяем сохранённую тему из localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
body.setAttribute('data-theme', 'dark');
}
// Обновляем иконку сразу при загрузке
updateButtonIcon();
// Функция переключения темы
function toggleTheme() {
const currentTheme = body.getAttribute('data-theme');
if (currentTheme === 'dark') {
body.removeAttribute('data-theme');
localStorage.setItem('theme', 'light');
} else {
body.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
// Обновляем иконку после переключения
updateButtonIcon();
}
// Назначаем обработчик на кнопку
themeToggleBtn.addEventListener('click', toggleTheme);Обновлённый HTML (кнопка без текста по умолчанию)
<button id="theme-toggle" aria-label="Переключить тему"></button>Или оставьте как было — с
🌙 / ☀️— но теперь скрипт будет заменять это на нужную иконку при загрузке.
Теперь:
- При светлой теме кнопка показывает 🌙 (нажми, чтобы включить тёмную).
- При тёмной теме кнопка показывает ☀️ (нажми, чтобы вернуться к светлой).
И всё это сохраняется между перезагрузками страницы! 🌓
Share this content:
Отправить комментарий