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.href = window.location.href;
})
}
/** [ph] */
function switchTheme() {
let isLight = true;
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches){
isLight = false
}
const html = document.documentElement
const switchTheme = document.getElementById('theme_switcher')
const os_default = ''
const sun = ''
const moon = ''
const removeTooltip = (timeInt = 1750) => {
setTimeout(()=>{
switchTheme.blur()
},timeInt)
}
switchTheme.innerHTML = os_default
//html.setAttribute('data-theme', 'auto')
switchTheme.setAttribute('data-tooltip', 'os theme')
switchTheme.focus()
removeTooltip(3000)
switchTheme.addEventListener('click', (e)=> {
e.preventDefault()
isLight = !isLight
html.setAttribute('data-theme', isLight? 'light':'dark')
switchTheme.innerHTML = isLight? sun : moon
switchTheme.setAttribute('data-tooltip', `theme ${isLight?'light':'dark'}`)
removeTooltip()
})
}