При переключении на Dark Mode ползунок не сохраняет позицию?

Question

[Aleksandr Zakordonnyi]

Подскажите начинающему неумёхе как сделать что бы при переключении темы на Dark Mode и перезагрузке страницы ползунок сохранял позицию тоже, вот код:

<div class="theme">
        <input type="checkbox" class="checkbox" id="chk" />
        <label class="label" for="chk">
            <ion-icon name="sunny-outline" class="fa-sun"></ion-icon>
            <ion-icon name="moon-outline" class="fa-moon"></ion-icon>
            <div class="ball"></div>
        </label>
    </div>

Css:

.theme {
	display: flex;
	align-items: center;
	position: absolute;
	top: 20px;
	right: 75px;
	background: #ff0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-ms-border-radius: 50px;
	-o-border-radius: 50px;
}
.checkbox {opacity: 0;position: absolute;}
.label {
	background-color: #111;
	border-radius: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	position: relative;
	height: 20px;
	width: 40px;
	transform: scale(1.3);
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	-o-transform: scale(1.3);
}
.label .ball {
	background-color: #fff;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	height: 16px;
    width: 17px;
	transform: translateX(0px);
	transition: transform 0.2s linear;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	-webkit-transition: transform 0.2s linear;
	-moz-transition: transform 0.2s linear;
	-ms-transition: transform 0.2s linear;
	-o-transition: transform 0.2s linear;
}
.checkbox:checked + .label .ball { 
	transform: translateX(19px); 
	-webkit-transform: translateX(19px); 
	-moz-transform: translateX(19px); 
	-ms-transform: translateX(19px); 
	-o-transform: translateX(19px); 
}
.fa-moon {color: #f1c40f;}
.fa-sun {color: #f39c12;}

Js:

// Dark Mode for Zero Credits
let darkMode = localStorage.getItem('darkMode'); 
const darkModeToggle = document.querySelector('#chk');

const enableDarkMode = () => {
  document.body.classList.add('light');
  localStorage.setItem('darkMode', 'enabled');
}
const disableDarkMode = () => {
  document.body.classList.remove('light');
  localStorage.setItem('darkMode', null);
}
if (darkMode === 'enabled') {
  enableDarkMode();
}
darkModeToggle.addEventListener('click', () => {
  darkMode = localStorage.getItem('darkMode'); 
  
  if (darkMode !== 'enabled') {
    enableDarkMode();
  } else {  
    disableDarkMode(); 
  }
});

Очень нужна помощь, делаю для себя.

Answer 1

[4ce]

Если добавить в JS darkModeToggle.checked=true
сюда:

if (darkMode === 'enabled') {
  enableDarkMode();
  darkModeToggle.checked=true;
}

то при загрузке страницы JS переставит его в нужное положение!

Простой пример переключения через JS здесь:
https://www.w3schools.com/jsref/prop_checkbox_chec...
https://www.w3schools.com/jsref/tryit.asp?filename...
найдено так:
https://www.google.com/search?client=ubuntu&channe...

И меньше драмы всё будет! только я бы как то по другому сделал ~_^

Comments

[Aleksandr Zakordonnyi]

Большое Вам спасибо, все получилось и работает как положено!

[Aleksandr Zakordonnyi]

И меньше драмы всё будет! только я бы как то по другому сделал ~_^

А можно узнать как, учусь просто.

[4ce]

Aleksandr Zakordonnyi,

А можно узнать как, учусь просто.

Чужой код это чужой код, свой зачастую кажется понятней и логичней.

Ниже представленное не является каким либо мерилом просто я так зачастую делаю

• В JS я стараюсь не использовать относительно новые let и const и стрелочную функцию из за обратной совместимости, хотя локальная переменная let нравится.
  
• В CSS наоборот не использую отдельно border-radius для каждого браузера.
  

Вариантов переключателя может быть много.
Конкретного решения у меня по этому поводу нет, я пытался накидать "свой" пример но запутался в результате который предположительно должен быть достигнут с помощью кода представленного в вопросе.

только я бы как то по другому сделал

Я наверно хотел сказать что многое индивидуально и что если разобраться можно сделать лучше относительно самого себя...
~_^

[Aleksandr Zakordonnyi]

4ce,
Большое Спасибо!