62 lines
1.2 KiB
JavaScript
62 lines
1.2 KiB
JavaScript
const moon = document.getElementById('moon');
|
|
const sun = document.getElementById('sun');
|
|
|
|
/**
|
|
* Check if the user has dark mode enabled
|
|
*/
|
|
if (localStorage.getItem('darkMode') === 'true') {
|
|
turnDark();
|
|
} else {
|
|
turnLight();
|
|
}
|
|
|
|
/**
|
|
* Update local storage with the current theme
|
|
*/
|
|
function updateLocalStorage() {
|
|
if (document.documentElement.classList.contains('dark')) {
|
|
localStorage.setItem('darkMode', 'true');
|
|
} else {
|
|
localStorage.setItem('darkMode', 'false');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Toggle the theme to dark
|
|
*/
|
|
function turnLight() {
|
|
document.documentElement.classList.remove('dark');
|
|
|
|
sun.style.display = 'none';
|
|
moon.style.display = 'block';
|
|
|
|
sun.style.opacity = '0';
|
|
moon.style.opacity = '1';
|
|
|
|
updateLocalStorage();
|
|
}
|
|
|
|
/**
|
|
* Toggle the theme to light
|
|
*/
|
|
function turnDark() {
|
|
document.documentElement.classList.add('dark');
|
|
|
|
moon.style.display = 'none';
|
|
sun.style.display = 'block';
|
|
|
|
moon.style.opacity = '0';
|
|
sun.style.opacity = '1';
|
|
|
|
updateLocalStorage();
|
|
}
|
|
|
|
// Check for icon clicks
|
|
moon.addEventListener('click', () => {
|
|
turnDark();
|
|
});
|
|
|
|
sun.addEventListener('click', () => {
|
|
turnLight();
|
|
});
|