added basic functionality for theme switch button

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
+  })
+)

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:
     </p>
     <strong>
-      <a href="javascript:void%20function(){const%20a=a=%3Edocument.querySelectorAll(a),b=(a,b)=%3EObject.assign(document.createElement(a),b);a(%22link[rel=\%22stylesheet\%22],style%22).forEach(a=%3Ea.remove()),a(%22*%22).forEach(a=%3Ea.style=%22%22),document.head.append(b(%22link%22,{rel:%22stylesheet%22,href:%22//cdn.jsdelivr.net/npm/water.css%402/out/water.css%22}),!a(%22meta[name=\%22viewport\%22]%22).length%26%26b(%22meta%22,{name:%22viewport%22,content:%22width=device-width,initial-scale=1.0%22}))}();">
+      <a href="javascript:(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%0Adocument.head.append(%0A%20%20createElement('link'%2C%20%7B%0A%20%20%20%20rel%3A%20'stylesheet'%2C%0A%20%20%20%20href%3A%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fwater.css'%0A%20%20%7D)%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%20toggleTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20rootElm%20%3D%20document.querySelector(%22%3Aroot%22)%3B%0A%20%20%2F%2F%20var%20rs%20%3D%20getComputedStyle(rootElm)%3B%0A%20%20const%20theme%20%3D%20rootElm.getAttribute(%22theme%22)%3B%0A%0A%20%20if%20(theme%20%3D%3D%3D%20%22dark%22)%20%7B%0A%20%20%20%20rootElm.setAttribute(%22theme%22%2C%20%22light%22)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20rootElm.setAttribute(%22theme%22%2C%20%22dark%22)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20themeCSS%20%3D%20%60%2F*%20*%20light%20theme%20colors%20*%2F%0A%3Aroot%5Btheme%3D%22light%22%5D%20%7B%0A--background-body%3A%20%23fff%3B%0A--background%3A%20%23efefef%3B%0A--background-alt%3A%20%23f7f7f7%3B%0A--selection%3A%20%239e9e9e%3B%0A--text-main%3A%20%23363636%3B%0A--text-bright%3A%20%23000%3B%0A--text-muted%3A%20%2370777f%3B%0A--links%3A%20%230076d1%3B%0A--focus%3A%20rgba(0%2C%20150%2C%20191%2C%200.67)%3B%0A--border%3A%20%23dbdbdb%3B%0A--code%3A%20%23000%3B%0A--animation-duration%3A%200.1s%3B%0A--button-hover%3A%20%23ddd%3B%0A--scrollbar-thumb%3A%20%23d5d5d5%3B%0A--scrollbar-thumb-hover%3A%20%23c4c4c4%3B%0A--form-placeholder%3A%20%23949494%3B%0A--form-text%3A%20%23000%3B%0A--variable%3A%20%2339a33c%3B%0A--highlight%3A%20%23ff0%3B%0A--select-arrow%3A%20url(%0A%20%20data%3Aimage%2Fsvg%20%2B%20xml%3Bcharset%3Dutf-8%2C%0A%20%20%253Csvgxmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22height%3D%2263%22width%3D%22117%22fill%3D%22%2523161f27%22%253E%253Cpathd%3D%22M115%202c-1-2-4-2-5%200L59%2053%207%202a4%204%200%2000-5%205l54%2054%202%202%203-2%2054-54c2-1%202-4%200-5z%22%2F%253E%253C%2Fsvg%253E%0A)%3B%0A%7D%0A%0A%2F*%20*%20dark%20theme%20colors!%20*%2F%0A%3Aroot%5Btheme%3D%22dark%22%5D%20%7B%0A--background-body%3A%20%23202b38%3B%0A--background%3A%20%23161f27%3B%0A--background-alt%3A%20%231a242f%3B%0A--selection%3A%20%231c76c5%3B%0A--text-main%3A%20%23dbdbdb%3B%0A--text-bright%3A%20%23fff%3B%0A--text-muted%3A%20%23a9b1ba%3B%0A--links%3A%20%2341adff%3B%0A--focus%3A%20rgba(0%2C%20150%2C%20191%2C%200.67)%3B%0A--border%3A%20%23526980%3B%0A--code%3A%20%23ffbe85%3B%0A--animation-duration%3A%200.1s%3B%0A--button-hover%3A%20%23324759%3B%0A--scrollbar-thumb%3A%20var(--button-hover)%3B%0A--scrollbar-thumb-hover%3A%20%23415c73%3B%0A--form-placeholder%3A%20%23a9a9a9%3B%0A--form-text%3A%20%23fff%3B%0A--variable%3A%20%23d941e2%3B%0A--highlight%3A%20%23efdb43%3B%0A--select-arrow%3A%20url(%0A%20%20data%3Aimage%2Fsvg%20%2B%20xml%3Bcharset%3Dutf-8%2C%0A%20%20%253Csvgxmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22height%3D%2263%22width%3D%22117%22fill%3D%22%2523efefef%22%253E%253Cpathd%3D%22M115%202c-1-2-4-2-5%200L59%2053%207%202a4%204%200%2000-5%205l54%2054%202%202%203-2%2054-54c2-1%202-4%200-5z%22%2F%253E%253C%2Fsvg%253E%0A)%3B%0A%7D%60%0A%0Adocument.body.append(%0A%20%20createElement('style'%2C%20%7B%0A%20%20%20%20innerText%3A%20themeCSS%0A%20%20%7D)%2C%0A%20%20createElement('button'%2C%20%7B%0A%20%20%20%20innerText%3A%20'toggle%20theme%20!'%2C%0A%20%20%20%20style%3A%20'position%3A%20fixed%20!important%3B%20top%3A%2050px%20!important%3B%20right%3A%20100px'%2C%0A%20%20%20%20onclick%3A%20toggleTheme%0A%20%20%7D)%0A)%7D)()%3B">
         Waterize
       </a>
     </strong>
@@ -358,7 +358,6 @@
     <footer>
       <a href="#">Back to top ⬆</a>
     </footer>
-
     <script src="script.js" defer></script>
   </body>
 </html>

src/variables-light.css

@@ -20,4 +20,4 @@
   --variable: #39a33c;
   --highlight: #ff0;
   --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
-}
+}