diff --git a/bookmarklet/original.js b/bookmarklet/original.js index f9613b0..08899c5 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -12,7 +12,7 @@ $$('*').forEach((el) => (el.style = '')) const linkElm = createElement('link', { rel: 'stylesheet', - href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css' + href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css' }) // Add water.css and responsive viewport (if necessary) @@ -24,29 +24,36 @@ document.head.append( }) ) -// theme switching logic +// Theme switching icons const moonSVG = '' const sunSVG = '' -const toggleBtn = createElement('div', { +// Theme toggling logic +const toggleBtn = createElement('button', { innerHTML: sunSVG, - style: 'position: fixed !important; top: 50px !important; right: 100px; cursor: pointer;' + ariaLabel: 'Switch theme', + style: ` + position: fixed; + top: 50px; + right: 50px; + margin: 0; + padding: 10px; + line-height: 1; + ` }) let theme = 'light' - const toggleTheme = () => { - if (theme === 'light' || theme === null) { + if (theme === 'light') { theme = 'dark' toggleBtn.innerHTML = moonSVG linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css' } else { theme = 'light' - linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css' + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css' toggleBtn.innerHTML = sunSVG } } -toggleBtn.onclick = toggleTheme - +toggleBtn.addEventListener('click', toggleTheme) document.body.append(toggleBtn)