From 10d49f02fb2267b43f97788a4e74934a7b2b2aff Mon Sep 17 00:00:00 2001 From: HarshitJoshi9152 Date: Fri, 20 Aug 2021 19:53:23 +0530 Subject: [PATCH 1/6] added basic functionality for theme switch button --- bookmarklet/original.js | 78 +++++++++++++++++++++++++++++++++++++++++ docs/index.html | 3 +- src/variables-light.css | 2 +- 3 files changed, 80 insertions(+), 3 deletions(-) diff --git a/bookmarklet/original.js b/bookmarklet/original.js index 99a5f0f..741bdd8 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -21,3 +21,81 @@ document.head.append( content: 'width=device-width,initial-scale=1.0' }) ) + +const toggleTheme = () => { + const rootElm = document.querySelector(':root') + // var rs = getComputedStyle(rootElm); + const theme = rootElm.getAttribute('theme') + + if (theme === 'dark') { + rootElm.setAttribute('theme', 'light') + } else { + rootElm.setAttribute('theme', 'dark') + } +} + +// css required to support theme switching ! +const themeCSS = `/* * light theme colors */ +:root[theme="light"] { +--background-body: #fff; +--background: #efefef; +--background-alt: #f7f7f7; +--selection: #9e9e9e; +--text-main: #363636; +--text-bright: #000; +--text-muted: #70777f; +--links: #0076d1; +--focus: rgba(0, 150, 191, 0.67); +--border: #dbdbdb; +--code: #000; +--animation-duration: 0.1s; +--button-hover: #ddd; +--scrollbar-thumb: #d5d5d5; +--scrollbar-thumb-hover: #c4c4c4; +--form-placeholder: #949494; +--form-text: #000; +--variable: #39a33c; +--highlight: #ff0; +--select-arrow: url( + data:image/svg + xml;charset=utf-8, + %3Csvgxmlns="http://www.w3.org/2000/svg"height="63"width="117"fill="%23161f27"%3E%3Cpathd="M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z"/%3E%3C/svg%3E +); +} + +/* * dark theme colors! */ +:root[theme="dark"] { +--background-body: #202b38; +--background: #161f27; +--background-alt: #1a242f; +--selection: #1c76c5; +--text-main: #dbdbdb; +--text-bright: #fff; +--text-muted: #a9b1ba; +--links: #41adff; +--focus: rgba(0, 150, 191, 0.67); +--border: #526980; +--code: #ffbe85; +--animation-duration: 0.1s; +--button-hover: #324759; +--scrollbar-thumb: var(--button-hover); +--scrollbar-thumb-hover: #415c73; +--form-placeholder: #a9a9a9; +--form-text: #fff; +--variable: #d941e2; +--highlight: #efdb43; +--select-arrow: url( + data:image/svg + xml;charset=utf-8, + %3Csvgxmlns="http://www.w3.org/2000/svg"height="63"width="117"fill="%23efefef"%3E%3Cpathd="M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z"/%3E%3C/svg%3E +); +}` + +document.body.append( + createElement('style', { + innerText: themeCSS + }), + createElement('button', { + innerText: 'toggle theme !', + style: 'position: fixed !important; top: 50px !important; right: 100px', + onclick: toggleTheme + }) +) diff --git a/docs/index.html b/docs/index.html index d6ffd9d..68fb820 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 @@ - diff --git a/src/variables-light.css b/src/variables-light.css index 222f26a..1d602e8 100755 --- a/src/variables-light.css +++ b/src/variables-light.css @@ -20,4 +20,4 @@ --variable: #39a33c; --highlight: #ff0; --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27); -} \ No newline at end of file +} From 0859ec67e67bd0a7aed296174c7f098ce6fa0364 Mon Sep 17 00:00:00 2001 From: HarshitJoshi9152 Date: Sat, 21 Aug 2021 01:13:25 +0530 Subject: [PATCH 2/6] added icons & fix ! --- bookmarklet/original.js | 42 ++++++++++++++++++++++++----------------- docs/index.html | 2 +- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/bookmarklet/original.js b/bookmarklet/original.js index 741bdd8..d28b719 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -22,18 +22,6 @@ document.head.append( }) ) -const toggleTheme = () => { - const rootElm = document.querySelector(':root') - // var rs = getComputedStyle(rootElm); - const theme = rootElm.getAttribute('theme') - - if (theme === 'dark') { - rootElm.setAttribute('theme', 'light') - } else { - rootElm.setAttribute('theme', 'dark') - } -} - // css required to support theme switching ! const themeCSS = `/* * light theme colors */ :root[theme="light"] { @@ -92,10 +80,30 @@ const themeCSS = `/* * light theme colors */ document.body.append( createElement('style', { innerText: themeCSS - }), - createElement('button', { - innerText: 'toggle theme !', - style: 'position: fixed !important; top: 50px !important; right: 100px', - onclick: toggleTheme }) ) + +const moonSVG = '' +const sunSVG = '' + +const toggleBtn = createElement('div', { + innerHTML: sunSVG, + style: 'position: fixed !important; top: 50px !important; right: 100px; cursor: pointer;' +}) + +const toggleTheme = () => { + const rootElm = document.querySelector(':root') + const theme = rootElm.getAttribute('theme') + + if (theme === 'light' || theme === null) { + rootElm.setAttribute('theme', 'dark') + toggleBtn.innerHTML = moonSVG + } else { + rootElm.setAttribute('theme', 'light') + toggleBtn.innerHTML = sunSVG + } +} + +toggleBtn.onclick = toggleTheme + +document.body.append(toggleBtn) diff --git a/docs/index.html b/docs/index.html index 68fb820..c123390 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 From 506e106b55ce596a2fd22954fe5cba60997d4eb0 Mon Sep 17 00:00:00 2001 From: HarshitJoshi9152 Date: Sat, 21 Aug 2021 10:47:42 +0530 Subject: [PATCH 3/6] using dark/light stylesheets --- bookmarklet/original.js | 83 +++++++---------------------------------- docs/index.html | 2 +- 2 files changed, 14 insertions(+), 71 deletions(-) diff --git a/bookmarklet/original.js b/bookmarklet/original.js index d28b719..f9613b0 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -10,79 +10,21 @@ $$('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/water.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' }) ) -// css required to support theme switching ! -const themeCSS = `/* * light theme colors */ -:root[theme="light"] { ---background-body: #fff; ---background: #efefef; ---background-alt: #f7f7f7; ---selection: #9e9e9e; ---text-main: #363636; ---text-bright: #000; ---text-muted: #70777f; ---links: #0076d1; ---focus: rgba(0, 150, 191, 0.67); ---border: #dbdbdb; ---code: #000; ---animation-duration: 0.1s; ---button-hover: #ddd; ---scrollbar-thumb: #d5d5d5; ---scrollbar-thumb-hover: #c4c4c4; ---form-placeholder: #949494; ---form-text: #000; ---variable: #39a33c; ---highlight: #ff0; ---select-arrow: url( - data:image/svg + xml;charset=utf-8, - %3Csvgxmlns="http://www.w3.org/2000/svg"height="63"width="117"fill="%23161f27"%3E%3Cpathd="M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z"/%3E%3C/svg%3E -); -} - -/* * dark theme colors! */ -:root[theme="dark"] { ---background-body: #202b38; ---background: #161f27; ---background-alt: #1a242f; ---selection: #1c76c5; ---text-main: #dbdbdb; ---text-bright: #fff; ---text-muted: #a9b1ba; ---links: #41adff; ---focus: rgba(0, 150, 191, 0.67); ---border: #526980; ---code: #ffbe85; ---animation-duration: 0.1s; ---button-hover: #324759; ---scrollbar-thumb: var(--button-hover); ---scrollbar-thumb-hover: #415c73; ---form-placeholder: #a9a9a9; ---form-text: #fff; ---variable: #d941e2; ---highlight: #efdb43; ---select-arrow: url( - data:image/svg + xml;charset=utf-8, - %3Csvgxmlns="http://www.w3.org/2000/svg"height="63"width="117"fill="%23efefef"%3E%3Cpathd="M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z"/%3E%3C/svg%3E -); -}` - -document.body.append( - createElement('style', { - innerText: themeCSS - }) -) - +// theme switching logic const moonSVG = '' const sunSVG = '' @@ -91,15 +33,16 @@ const toggleBtn = createElement('div', { style: 'position: fixed !important; top: 50px !important; right: 100px; cursor: pointer;' }) -const toggleTheme = () => { - const rootElm = document.querySelector(':root') - const theme = rootElm.getAttribute('theme') +let theme = 'light' +const toggleTheme = () => { if (theme === 'light' || theme === null) { - rootElm.setAttribute('theme', 'dark') + theme = 'dark' toggleBtn.innerHTML = moonSVG + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css' } else { - rootElm.setAttribute('theme', 'light') + theme = 'light' + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css' toggleBtn.innerHTML = sunSVG } } diff --git a/docs/index.html b/docs/index.html index c123390..b4d2580 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 From b850c3072dd3636787623c1b0a46de92fc635e86 Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 21 Aug 2021 11:15:11 -0400 Subject: [PATCH 4/6] Bookmarklet cleanups --- bookmarklet/original.js | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) 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) From 002df477cd65bd32d0109a76669e6ce7dd0b2c7c Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 21 Aug 2021 11:17:15 -0400 Subject: [PATCH 5/6] Update bookmarklet in HTML --- docs/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index b4d2580..f8e18a4 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 @@ -305,7 +305,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu + natoque penatibus et magnis dis parturient montes, nascjavascript:(function()%7Bconst%20%24%24%20%3D%20(selector)%20%3D%3E%20document.querySelectorAll(selector)%0Aconst%20createElement%20%3D%20(tagName%2C%20properties)%20%3D%3E%20Object.assign(document.createElement(tagName)%2C%20properties)%0A%0A%24%24('link%5Brel%3D%22stylesheet%22%5D%2Cstyle').forEach((el)%20%3D%3E%20el.remove())%0A%0A%24%24('*').forEach((el)%20%3D%3E%20(el.style%20%3D%20''))%0A%0Aconst%20linkElm%20%3D%20createElement('link'%2C%20%7B%0A%20%20rel%3A%20'stylesheet'%2C%0A%20%20href%3A%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fwater.css'%0A%7D)%0A%0Adocument.head.append(%0A%20%20linkElm%2C%0A%20%20!%24%24('meta%5Bname%3D%22viewport%22%5D').length%20%26%26%20createElement('meta'%2C%20%7B%0A%20%20%20%20name%3A%20'viewport'%2C%0A%20%20%20%20content%3A%20'width%3Ddevice-width%2Cinitial-scale%3D1.0'%0A%20%20%7D)%0A)%0A%0Aconst%20moonSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-moon%22%3E%3Cpath%20d%3D%22M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'%0Aconst%20sunSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-sun%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%2218.36%22%20x2%3D%2219.78%22%20y2%3D%2219.78%22%3E%3C%2Fline%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%225.64%22%20x2%3D%2219.78%22%20y2%3D%224.22%22%3E%3C%2Fline%3E%3C%2Fsvg%3E'%0A%0Aconst%20toggleBtn%20%3D%20createElement('div'%2C%20%7B%0A%20%20innerHTML%3A%20sunSVG%2C%0A%20%20style%3A%20'position%3A%20fixed%20!important%3B%20top%3A%2050px%20!important%3B%20right%3A%20100px%3B%20cursor%3A%20pointer%3B'%0A%7D)%0A%0Alet%20theme%20%3D%20'light'%0A%0Aconst%20toggleTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20if%20(theme%20%3D%3D%3D%20'light'%20%7C%7C%20theme%20%3D%3D%3D%20null)%20%7B%0A%20%20%20%20theme%20%3D%20'dark'%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20moonSVG%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fdark.css'%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20theme%20%3D%20'light'%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fwater.css'%3B%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20sunSVG%0A%20%20%7D%0A%7D%0A%0AtoggleBtn.onclick%20%3D%20toggleTheme%0A%0Adocument.body.append(toggleBtn)%7D)()%3B"> +193 + etur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. From 21f50a889f905fcd9cd8cfb949f7d1809ee14eb0 Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 21 Aug 2021 11:17:49 -0400 Subject: [PATCH 6/6] Create six-owls-punch.md --- .changeset/six-owls-punch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/six-owls-punch.md 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