mirror_css/css-water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-08-11 23:54:12 +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 () {
const switchBtn = document.getElementById('switch');
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 = {
dark: '../dist/dark.css',
darkStandalone: '../dist/dark.standalone.css',
@@ -10,23 +11,31 @@
};
switchBtn.addEventListener('click', function() {
switch (stylesheet.getAttribute('href')) {
case themes.dark:
stylesheet.href = mql.matches ? themes.lightStandalone : themes.darkStandalone;
break;
case themes.darkStandalone:
stylesheet.href = themes.lightStandalone;
break;
case themes.light || themes.lightStandalone:
stylesheet.href = mql.matches ? themes.lightStandalone : themes.darkStandalone;
break;
case themes.lightStandalone:
stylesheet.href = themes.darkStandalone;
break;
const readTheme = stylesheet.getAttribute('href');
if (readTheme === themes.dark) {
if (darkMql.matches) {
stylesheet.href = themes.lightStandalone
} else if (lightMql.matches) {
stylesheet.href = themes.darkStandalone
} else {
stylesheet.href = themes.light
}
} else if (readTheme === themes.darkStandalone) {
stylesheet.href = themes.lightStandalone
} else if (readTheme === themes.light) {
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) {
stylesheet.href = themes.dark;
} else {