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

Update switch rules

Browse Source
This commit is contained in:
kimulaco
2019-05-29 18:56:36 +09:00
parent 7712f6aab9
commit 1ce1c216c9
1 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
script.js
View File

@@ -1,7 +1,8 @@
(function () { (function () {
const switchBtn = document.getElementById('switch'); const switchBtn = document.getElementById('switch');
const stylesheet = document.getElementById('stylesheet'); const stylesheet = document.getElementById('stylesheet');
const mql = matchMedia('(prefers-color-scheme: dark)'); const darkMql = matchMedia('(prefers-color-scheme: dark)');
const lightMql = matchMedia('(prefers-color-scheme: light)');
const themes = { const themes = {
dark: '../dist/dark.css', dark: '../dist/dark.css',
darkStandalone: '../dist/dark.standalone.css', darkStandalone: '../dist/dark.standalone.css',
@@ -10,23 +11,31 @@
}; };
switchBtn.addEventListener('click', function() { switchBtn.addEventListener('click', function() {
switch (stylesheet.getAttribute('href')) { const readTheme = stylesheet.getAttribute('href');
case themes.dark: if (readTheme === themes.dark) {
stylesheet.href = mql.matches ? themes.lightStandalone : themes.darkStandalone; if (darkMql.matches) {
break; stylesheet.href = themes.lightStandalone
case themes.darkStandalone: } else if (lightMql.matches) {
stylesheet.href = themes.lightStandalone; stylesheet.href = themes.darkStandalone
break; } else {
case themes.light || themes.lightStandalone: stylesheet.href = themes.light
stylesheet.href = mql.matches ? themes.lightStandalone : themes.darkStandalone; }
break; } else if (readTheme === themes.darkStandalone) {
case themes.lightStandalone: stylesheet.href = themes.lightStandalone
stylesheet.href = themes.darkStandalone; } else if (readTheme === themes.light) {
break; if (darkMql.matches) {
stylesheet.href = themes.lightStandalone
} else if (lightMql.matches) {
stylesheet.href = themes.darkStandalone
} else {
stylesheet.href = themes.dark
}
} else if (readTheme === themes.lightStandalone) {
stylesheet.href = themes.darkStandalone
} }
}); });
mql.addListener(function (mql) { darkMql.addListener(function (mql) {
if (mql.matches) { if (mql.matches) {
stylesheet.href = themes.dark; stylesheet.href = themes.dark;
} else { } else {