Главная » DARYA DLE » Скрипты » Смена дизайна по клику на checkbox
18 0  

Смена дизайна по клику на checkbox

Для смены дизайна сайта, как правило с светлого фона темный и наоборот, можно использовать переключатель checkbox, при клике на котором будет коректироватся css  селектору data

Вся конструкция работает такЖ при клике на чекбокс к блоку с класом ".ramka" добавляется селектор (data-theme="dark") если вернуть чекбокс в исходную позицию будет (data-theme="light")

HTML:

<body class="ramka">  
  <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox" />
    <div class="slider round"></div>
  </label>
</body>

CSS:

body {background: white;}
[data-theme="dark"] {background: black;}

Скрипт:

	<script>   /* menu smena dizaina */
	const toggleSwitch = document.querySelector(
			'.theme-switch input[type="checkbox"]'
	);
	const currentTheme = localStorage.getItem("theme");
	const mainElement = document.querySelector(".ramka");

	if (currentTheme) {
		mainElement.setAttribute("data-theme", currentTheme);

		if (currentTheme === "dark") {
			toggleSwitch.checked = true;
		}
	}

	function switchTheme(e) {
		if (e.target.checked) {
			mainElement.setAttribute("data-theme", "dark");
			localStorage.setItem("theme", "dark");
		} else {
			mainElement.setAttribute("data-theme", "light");
			localStorage.setItem("theme", "light");
		}
	}

	toggleSwitch.addEventListener("change", switchTheme, false);


		</script>

Источники:

Пример на Кодепен - смотреть
Хороший фаг по checkbox - смотреть

Виды (дизайн) - смотреть


Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020