From 506e106b55ce596a2fd22954fe5cba60997d4eb0 Mon Sep 17 00:00:00 2001 From: HarshitJoshi9152 Date: Sat, 21 Aug 2021 10:47:42 +0530 Subject: [PATCH] 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