64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
function darkModeListener() {
|
|
document.querySelector("html").classList.toggle("dark");
|
|
if (localStorage.theme == 'light') {
|
|
localStorage.theme = 'dark';
|
|
} else {
|
|
localStorage.theme = 'light';
|
|
}
|
|
}
|
|
|
|
document.querySelector("input[type='checkbox']#toogleTheme").addEventListener("click", darkModeListener);
|
|
|
|
if(localStorage.theme) {
|
|
if (localStorage.theme == 'light') {
|
|
if (document.querySelector("html").classList.contains('dark')) {
|
|
document.querySelector("html").classList.toggle("dark");
|
|
}
|
|
document.getElementById("toogleTheme").checked = true;
|
|
}
|
|
} else {
|
|
// Default Dark Theme
|
|
localStorage.theme = 'dark';
|
|
}
|
|
|
|
// Ability to disable blur effects for slower devices
|
|
const LOCAL_STORAGE_KEY = 'blur';
|
|
const blurCheckbox = document.querySelector("input[type='checkbox']#toggleBlur");
|
|
|
|
function setCSSFilter(selector, value) {
|
|
document.querySelectorAll(selector).forEach(el => {
|
|
el.style.backdropFilter = value
|
|
});
|
|
}
|
|
|
|
function applyBlur(enabled) {
|
|
if (!enabled) {
|
|
setCSSFilter('.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-lg', 'none');
|
|
return;
|
|
}
|
|
|
|
setCSSFilter('.backdrop-blur-lg', 'blur(16px)');
|
|
setCSSFilter('.backdrop-blur', 'blur(8px)');
|
|
setCSSFilter('.backdrop-blur-sm', 'blur(4px)');
|
|
}
|
|
|
|
function initBlurToggle() {
|
|
const storedValue = localStorage.getItem(LOCAL_STORAGE_KEY);
|
|
const enabled = storedValue === null ? true : storedValue === 'true';
|
|
|
|
// initialize UI and DOM
|
|
applyBlur(enabled);
|
|
if (blurCheckbox) blurCheckbox.checked = enabled;
|
|
|
|
// add event listener
|
|
if (blurCheckbox) {
|
|
blurCheckbox.addEventListener('click', (e) => {
|
|
console.log("Received Event");
|
|
const isEnabled = e.target.checked;
|
|
applyBlur(isEnabled);
|
|
localStorage.setItem(LOCAL_STORAGE_KEY, isEnabled ? 'true' : 'false');
|
|
});
|
|
}
|
|
}
|
|
|
|
initBlurToggle(); |