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 = '' document.addEventListener('DOMContentLoaded', () => { 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() }) const removeTooltip = (timeInt = 1750) => { setTimeout(()=>{ switchTheme.blur() },timeInt) }