diff --git a/.changeset/six-owls-punch.md b/.changeset/six-owls-punch.md
new file mode 100644
index 0000000..292800d
--- /dev/null
+++ b/.changeset/six-owls-punch.md
@@ -0,0 +1,5 @@
+---
+"water.css": patch
+---
+
+Added a theme toggle button to the bookmarklet
diff --git a/bookmarklet/original.js b/bookmarklet/original.js
index 99a5f0f..08899c5 100644
--- a/bookmarklet/original.js
+++ b/bookmarklet/original.js
@@ -10,14 +10,50 @@ $$('link[rel="stylesheet"],style').forEach((el) => el.remove())
// Remove all inline styles
$$('*').forEach((el) => (el.style = ''))
+const linkElm = createElement('link', {
+ rel: 'stylesheet',
+ href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css'
+})
+
// Add water.css and responsive viewport (if necessary)
document.head.append(
- createElement('link', {
- rel: 'stylesheet',
- href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'
- }),
+ linkElm,
!$$('meta[name="viewport"]').length && createElement('meta', {
name: 'viewport',
content: 'width=device-width,initial-scale=1.0'
})
)
+
+// Theme switching icons
+const moonSVG = ''
+const sunSVG = ''
+
+// Theme toggling logic
+const toggleBtn = createElement('button', {
+ innerHTML: sunSVG,
+ 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 = '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/light.css'
+ toggleBtn.innerHTML = sunSVG
+ }
+}
+
+toggleBtn.addEventListener('click', toggleTheme)
+document.body.append(toggleBtn)
diff --git a/docs/index.html b/docs/index.html
index d6ffd9d..d9ec359 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -189,7 +189,7 @@
The Waterize bookmarklet can be used to make ugly websites more readable by replacing the styles with Water.css. Just drag this link to your bookmarks bar:
-
+
Waterize
@@ -358,7 +358,6 @@
-