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)