52 lines
1.9 KiB
JavaScript
52 lines
1.9 KiB
JavaScript
const checkbox = document.querySelector("input[type='checkbox']");
|
|
const mode_switch_icon = document.querySelector(".mode-switch-icon");
|
|
|
|
// configure and set correct state of theme checkbox
|
|
checkbox.checked = siteVars['theme_active'] == 'dark'
|
|
checkbox.addEventListener("click", () => {
|
|
theme_switch();
|
|
set_theme_checkbox();
|
|
});
|
|
|
|
set_theme_checkbox();
|
|
|
|
// apply specific styling after page reload
|
|
document.getElementById('navbar').classList.add("topBotomBordersOut");
|
|
|
|
// set correct state of dark/light theme mode
|
|
function set_theme_checkbox() {
|
|
if (checkbox.checked) {
|
|
mode_switch_icon.classList.add("mode-switch-dark");
|
|
mode_switch_icon.classList.remove("mode-switch-light");
|
|
} else {
|
|
mode_switch_icon.classList.add("mode-switch-light");
|
|
mode_switch_icon.classList.remove("mode-switch-dark");
|
|
}
|
|
}
|
|
|
|
// switch dark/light mode and store the state to local storage
|
|
function theme_switch() {
|
|
if (siteVars['theme_active'] == 'light') {
|
|
siteVars['theme_active'] = siteVars['theme_forced'] = 'dark';
|
|
|
|
document.getElementById('css-darkmode').setAttribute('media', 'all');
|
|
document.getElementById('css-darkmode').disabled = false;
|
|
|
|
document.getElementById('css-lightmode').setAttribute('media', 'not all');
|
|
document.getElementById('css-lightmode').disabled = true;
|
|
} else {
|
|
siteVars['theme_active'] = siteVars['theme_forced'] = 'light';
|
|
|
|
document.getElementById('css-darkmode').setAttribute('media', 'not all');
|
|
document.getElementById('css-darkmode').disabled = true;
|
|
|
|
document.getElementById('css-lightmode').setAttribute('media', 'all');
|
|
document.getElementById('css-lightmode').disabled = false;
|
|
}
|
|
localStorage.setItem('theme_forced', siteVars['theme_active']);
|
|
|
|
document.body.classList.add('expand');
|
|
document.body.offsetHeight;
|
|
document.body.classList.remove('expand');
|
|
}
|