From e9b6b916ec14f6453fb863c730fddb623f06772f Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 2 Oct 2021 20:20:06 -0400 Subject: [PATCH] Save theme in bookmarklet --- bookmarklet/original.js | 30 ++++++++++++++++++++++-------- docs/index.html | 2 +- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/bookmarklet/original.js b/bookmarklet/original.js index 08899c5..2589eea 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/light.css' + href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css' }) // Add water.css and responsive viewport (if necessary) @@ -43,17 +43,31 @@ const toggleBtn = createElement('button', { }) let theme = 'light' -const toggleTheme = () => { - if (theme === 'light') { - theme = 'dark' +const updateTheme = () => { + if (theme === 'dark') { toggleBtn.innerHTML = moonSVG - linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css' + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css' } else { - theme = 'light' - linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css' toggleBtn.innerHTML = sunSVG + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css' } } -toggleBtn.addEventListener('click', toggleTheme) +toggleBtn.addEventListener('click', () => { + theme = theme === 'dark' ? 'light' : 'dark' + localStorage.setItem('water.css-theme', theme) + updateTheme() +}) document.body.append(toggleBtn) + +const saved = localStorage.getItem('water.css-theme') +if (saved) { + theme = saved + updateTheme() +} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + theme = 'dark' + updateTheme() +} else if (window.matchMedia('(prefers-color-scheme: light)').matches) { + theme = 'light' + updateTheme() +} diff --git a/docs/index.html b/docs/index.html index d9ec359..066495e 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