Показать сообщение отдельно
  #1 (permalink)  
Старый 05.07.2021, 01:39
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 48

localStorage - несколько классов
Здравствуйте!
Есть простой переключатель тем (светлая/тёмная).
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>
Ответить с цитированием