From 0859ec67e67bd0a7aed296174c7f098ce6fa0364 Mon Sep 17 00:00:00 2001 From: HarshitJoshi9152 Date: Sat, 21 Aug 2021 01:13:25 +0530 Subject: [PATCH] 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