JavaScript:
/*
* Saves/Retrieves Dark Mode preference to local storage
*
*/
_uiHandleDarkMode(mode = 'init') {
let self = this;
if (this._lPage.classList.contains('remember-theme')) {
let darkMode = localStorage.getItem('oneuiDarkMode') || false;
if (mode === 'init') {
if (darkMode) {
self._lPage.classList.add('sidebar-dark');
self._lPage.classList.add('page-header-dark');
self._lPage.classList.add('dark-mode');
} else if (mode === 'init') {
self._lPage.classList.remove('dark-mode');
}
} else if (mode === 'on') {
localStorage.setItem('oneuiDarkMode', true);
} else if (mode === 'off') {
localStorage.removeItem('oneuiDarkMode');
}
} else if (mode === 'init' ) {
localStorage.removeItem('oneuiDarkMode');
}
}
Кейза е следният: има бутон, който toggle-ва dark/light мод. Има и в root клас page-container, който 'remember-theme' клас, прави така, че избора на dark/light да се пази в local storage.
Проблема е следният - dark mode/ light работи, но когато се добави remember-theme класа , и dark-mode ми е сетнато - тоест дифолтното поведение трябва да е dark-mode класа - при отваряне отваря light mode-a. Ако се премахне remember-theme , си работи като хората , но пък разбира се не се запазват и някой ако избере light темата, не се запазва.
https://vicove.skuka.info/admin/login - [email protected] / pass: demo123 - вмомента съм махнал remember-theme, за да може дефолтното поведение да е тъмната версия, но ако сложа remember-theme в page-container, пуска бялата тема.
едит: даже за репродуциране вмомента сетнах remember-theme в класа, за да видите за какво става въпрос.
https://i.gyazo.com/fbb1a14f59fd281eec6560a411ef6375.png ето го и page-container-a
Ta това, което искам е, при сетнат dark-mode бай дифолт, да може да запазва и кукито , някой ако иска Light mode, да работи коректно, ако се сложи dark-mode бай дифолт, с remember-theme, бодито си стои light.