document.addEventListener('DOMContentLoaded', () => {
switchTheme();
setLanguageCookie();
})
function setLanguageCookie() {
let langToggle = document.getElementById('lang-toggle');
// check if element exists
langToggle?.addEventListener('click', (e)=> {
e.preventDefault();
// set lang, if lang attribute doesn't exit set default en
let lang = langToggle.getAttribute('lang') ? langToggle.getAttribute('lang') : 'en';
document.cookie = "language=" + lang;
window.location.assign(window.location.href);
})
}
/** [ph] */
function switchTheme() {
// Define the SVG icons first
const os_default = ''
const sun = ''
const moon = ''
// Check for saved theme preference first
let savedTheme = localStorage.getItem('theme-preference');
let isLight = true;
if (savedTheme) {
// Use saved preference
isLight = savedTheme === 'light';
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// Fall back to OS preference only if no saved theme
isLight = false;
}
const html = document.documentElement;
const switchTheme = document.getElementById('theme_switcher');
const removeTooltip = (timeInt = 1750) => {
setTimeout(() => {
switchTheme.blur();
}, timeInt);
};
// Apply the theme immediately if we have a saved preference
if (savedTheme && savedTheme !== 'auto') {
html.setAttribute('data-theme', savedTheme);
switchTheme.innerHTML = isLight ? sun : moon;
switchTheme.setAttribute('data-tooltip', `theme ${savedTheme}`);
} else {
// Default OS theme
switchTheme.innerHTML = os_default;
switchTheme.setAttribute('data-tooltip', 'os theme');
}
switchTheme.focus();
removeTooltip(3000);
switchTheme.addEventListener('click', (e) => {
e.preventDefault();
isLight = !isLight;
const newTheme = isLight ? 'light' : 'dark';
// Save preference
localStorage.setItem('theme-preference', newTheme);
html.setAttribute('data-theme', newTheme);
switchTheme.innerHTML = isLight ? sun : moon;
switchTheme.setAttribute('data-tooltip', `theme ${newTheme}`);
removeTooltip();
});
}