Меняем фон по нажатию на кнопку

На многих сайтах мы видели что можно менять фон по нажатию на кнопку.
Сменить светлую тему на тёмную тему.
Браузер будет помнить какой цвет выбрал наш посетитель сайта.
Мы для этого будем задействовать LocalStorage.
вот тут несколько вариантов как это можно сделать.

Вариант 1

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>фон</title>
</head>
<body>
<button id="changeColorBtn">Изменить цвет фона</button>
<script src="js.js"></script>
</body>
</html>

js.js

const changeColorBtn = document.getElementById("changeColorBtn");
const body = document.querySelector("body");
// При загрузке страницы проверяем, есть ли значение в LocalStorage
const savedColor = localStorage.getItem("bgColor");
if (savedColor) {
body.style.backgroundColor = savedColor;
}
// Обработчик события клика на кнопке
changeColorBtn.addEventListener("click", () => {
const randomColor = getRandomColor();
body.style.backgroundColor = randomColor;
localStorage.setItem("bgColor", randomColor);
});
// Функция для генерации случайного цвета в формате HEX
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

Вариант 2

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изменение цвета фона</title>
<style>
body {
background-color: #fff; /* Устанавливаем начальный цвет фона */
}
button {
margin-top: 10px; /* Отступ сверху */
}
</style>
</head>
<body>
<h1>Изменение цвета фона</h1>
<p>Нажмите на кнопку, чтобы изменить цвет фона страницы.</p>
<button id="btn">Изменить цвет</button>
<script>
// Получаем кнопку
const btn = document.getElementById('btn');
// Получаем цвет фона из localStorage
const bgColor = localStorage.getItem('bgColor');
// Если цвет фона есть, устанавливаем его
if (bgColor) {
document.body.style.backgroundColor = bgColor;
}
// Добавляем обработчик события на кнопку
btn.addEventListener('click', function() {
// Генерируем случайный цвет
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
// Устанавливаем цвет фона
document.body.style.backgroundColor = randomColor;
// Сохраняем цвет фона в localStorage
localStorage.setItem('bgColor', randomColor);
// Выводим сообщение об изменении цвета фона
console.log(`Цвет фона изменен на ${randomColor}`);
});
</script>
</body>
</html>

Вариант 3

Только светлая и тёмная тема.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изменение цвета фона</title>
<style>
.light-mode {
background-color: #fff; /* Устанавливаем начальный цвет фона */
color: #000; /* Устанавливаем цвет текста */
}
button {
margin-top: 10px; /* Отступ сверху */
}
.dark-mode {
background-color: #000; /* Цвет фона для темной темы */
color: #fff; /* Цвет текста для темной темы */
}
</style>
</head>
<body class="light-mode">
<h1>Изменение цвета фона</h1>
<p>Нажмите на кнопку, чтобы изменить цвет фона страницы.</p>
<button id="btn">Изменить цвет</button>
<script>
// Получаем кнопку
const btn = document.getElementById('btn');
// Получаем класс фона из localStorage
const bgClass = localStorage.getItem('bgClass');
// Если класс фона есть, устанавливаем его
if (bgClass) {
document.body.classList.add(bgClass);
}
// Добавляем обработчик события на кнопку
btn.addEventListener('click', function() {
// Получаем текущий класс фона
const currentClass = document.body.classList.value;
// Если текущий класс - пустой или светлый, меняем на темный
if (currentClass === 'light-mode') {
document.body.classList.remove('light-mode');
document.body.classList.add('dark-mode');
localStorage.setItem('bgClass', 'dark-mode');
console.log('Тёмная тема включена');
} else { // Иначе меняем на светлый
document.body.classList.remove('dark-mode');
document.body.classList.add('light-mode');
localStorage.setItem('bgClass', 'light-mode');
console.log('Светлая тема включена');
}
});
</script>
</body>
</html>

Вы можете скачать скрипт.
Скачать

Обсуждение закрыто.