The website is currently hosted on a PC, and I've been experimenting with different methods to no avail. Below are the codes that I have implemented. While everything seems to be working fine, there is one issue - whenever I refresh my browser, the mode reverts back to light mode even if the toggle is set to dark mode. It's worth mentioning that I don't have any prior experience with using local storage. Can anyone suggest the best solution that would apply to the codes provided?
<header>
<div class="controls">
<p>Light/Dark Mode</p>
<label class="toggle-switch" for="dark-mode-toggle">
<input type="checkbox" id="dark-mode-toggle" name="theme" onclick="otherColorChanges()" onreset="restoreDefaultColor()">
<div class="toggle-switch-border">
<div class="toggle-switch-dot"></div>
</div>
</label>
</div>
</header>
.toggle-switch {
display : inline-flex;
align-items : center;
font-family : 'Sora', sans-serif;
font-weight : 700;
font-size : .875rem;
cursor : pointer;
}
.toggle-switch-border {
display : inline-flex;
align-items : center;
width : 60px;
height : 36px;
border : 1px solid var(--primary);
border-radius : 20px;
box-sizing : border-box;
margin-inline-start : 8px;
}
.toggle-switch input {
display: none;
}
.toggle-switch-dot {
width : 28px;
height : 28px;
border-radius : 50%;
background : var(--primary);
transform : translate3d(3px, 0, 0);
transition : transform .1s ease-in-out;
}
.toggle-switch input:checked + * .toggle-switch-dot {
transform : translate3d(26px, 0, 0);
}
body {
color : var(--primary);
font-family : "Work Sans", sans-serif;
background : var(--background);
/*box-sizing : border-box;*/
transition : color 0.5s;
transition : background 0.5s;
--dark-background : #253a52;
--dark-primary : white; /*#FFFFE3*/
--dark-link : #A9FE75;
--light-background : white; /*#ffffe3*/
--light-primary : #253a52;
--light-link : #1348da;
--background : var(--light-background);
--primary : var(--light-primary);
--link : var(--light-link);
}
a {
color : var(--link);
}
/* separator bars */
nav,
section {
border-block-end : 1px solid var(--primary);
}
/* container for dark-mode toggle */
header .controls {
display : flex;
justify-content : end;
padding : 1rem 0;
margin-right : 3rem;
}
a.btn {
display : inline-flex;
align-items : center;
background : var(--link);
color : var(--background);
text-decoration : none;
padding : 0 1rem;
height : 2.5rem;
border-radius : 1.25rem;
font-family : "Montserrat", sans-serif;
font-weight : 700;
font-size : 0.875rem;
}
/*Light/Dark mode toggle*/
class CssPropControl {
constructor(element) {
this.element = element
}
get(varName) {
return getComputedStyle(this.element).getPropertyValue(varName)
}
set(varName, val) {
return this.element.style.setProperty(varName, val)
}
}
const bodyCssProps = new CssPropControl(document.body)
let toggle = document.querySelector('#dark-mode-toggle')
toggle.addEventListener('click', () => {
let mode = toggle.checked ? 'dark' : 'light'
bodyCssProps.set('--background', bodyCssProps.get(`--${mode}-background`))
bodyCssProps.set('--primary', bodyCssProps.get(`--${mode}-primary`))
bodyCssProps.set('--link', bodyCssProps.get(`--${mode}-link`))
})
/*Save dark mode in local storage*/
const darkModeToggle = document.getElementById('darkModeToggle');
darkModeToggle.addEventListener('click', () => {
darkModeToggle.checked ? document.body.classList.add("bodyCssProps") : document.body.classList.remove("bodyCssProps");
localStorage.setItem('darkModeStatus', darkModeToggle.checked);
});
window.addEventListener('load', (event) => {
if (localStorage.getItem('darkModeStatus') == "true") {
document.body.classList.add("bodyCssProps");
document.getElementById('darkModeToggle').checked = true;
}
});