Здравствуйте!
Есть простой переключатель тем (светлая/тёмная).
https://codepen.io/mirandalwashburn/pen/wZmZLz
Там в JS коде передаётся только один класс.
Как добавить ещё несколько классов?
Т.е. нужно стилизовать несколько классов.
Так не получилось:
localStorage.toggled != 'dark, another-dark'
localStorage.toggled != 'dark' or 'another-dark'
В этом кусочке:
'dark'
if (localStorage.toggled != 'dark') {
$('#main, p').toggleClass('dark', true);
localStorage.toggled = "dark";
Продублирую тут весь код:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<main id="main">
<p> Click to toggle dark mode </p>
<label class="switch">
<input type="checkbox" onclick="darkLight()" id="checkBox" >
<span class="slider"></span>
</label>
</main>
<style>
body {
margin: 0;
padding: 0;
}
main {
height: 100vh;
width: 100vw;
transition: background 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
}
main p {
align-self: center;
font-family: sans-serif;
transition: color 0.3s ease;
}
/*TOGGLE COLORS*/
.dark {
background: #545454;
color: #efefef;
}
p {
background: none !important;
}
/*SWITCH*/
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
align-self: center;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2196f3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider {
border-radius: 30px;
}
.slider:before {
border-radius: 50%;
}
</style>
<script>
$('#main').toggleClass(localStorage.toggled);
function darkLight() {
/*DARK CLASS*/
if (localStorage.toggled != 'dark') {
$('#main, p').toggleClass('dark', true);
localStorage.toggled = "dark";
} else {
$('#main, p').toggleClass('dark', false);
localStorage.toggled = "";
}
}
/*Add 'checked' property to input if background == dark*/
if ($('main').hasClass('dark')) {
$( '#checkBox' ).prop( "checked", true )
} else {
$( '#checkBox' ).prop( "checked", false )
}
</script>
