Смена дизайна по клику на 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 - смотреть
Виды (дизайн) - смотреть