mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-08 14:16:58 +02:00
Code Issues Releases Wiki Activity

added basic functionality for theme switch button

Browse Source
This commit is contained in:
HarshitJoshi9152
2021-08-20 19:53:23 +05:30
parent 6b3e33d156
commit 10d49f02fb
3 changed files with 80 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/index.html
View File

@@ -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>