I have 2 javascript files and I want to combine them. One is for dark-mode and the other one is for dark-mode switch button. Separately they work fine, but when combined dark-mode works like it should, but switch button place isn't saved after refreshing the page. What can I do to fix that?
/* DARK-MODE */
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
(function() {
let onpageLoad = localStorage.getItem("theme") || "";
let element = document.body;
element.classList.add(onpageLoad);
document.getElementById("theme").textContent = "DarkMode";
localStorage.getItem("theme") || "light";
})();
function themeToggle() {
let element = document.body;
element.classList.toggle("dark-mode");
let theme = localStorage.getItem("theme");
if (theme && theme === "dark-mode") {
localStorage.setItem("theme", "");
} else {
localStorage.setItem("theme", "dark-mode");
}
document.getElementById("theme").textContent = localStorage.getItem("theme");
};
/* DM-BUTTON */
function App() {}
App.prototype.setState = function(state) {
localStorage.setItem('checked', state);
}
App.prototype.getState = function() {
return localStorage.getItem('checked');
}
function init() {
var app = new App();
var state = app.getState();
var checkbox = document.querySelector('#toggle');
if (state == 'true') {
checkbox.checked = true;
}
checkbox.addEventListener('click', function() {
app.setState(checkbox.checked);
});
}
init();
<div class="toggle1">
<input type="checkbox" onclick="themeToggle()" class="dmbtn" id="toggle">
<label for="toggle"></label>
</div>