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

Add ThemeSwitcher

Browse Source
This commit is contained in:
kimulaco
2019-05-29 22:33:08 +09:00
parent 1ce1c216c9
commit 5de6636a1b
1 changed files with 65 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
script.js
View File

@@ -1,45 +1,70 @@
(function () { (function (ThemeSwitcher) {
const switchBtn = document.getElementById('switch'); const themeSwitcher = new ThemeSwitcher('stylesheet');
const stylesheet = document.getElementById('stylesheet'); const themeSwitch = document.getElementById('theme-switch');
const darkMql = matchMedia('(prefers-color-scheme: dark)');
const lightMql = matchMedia('(prefers-color-scheme: light)');
const themes = { const themes = {
dark: '../dist/dark.css', dark: 'dark',
darkStandalone: '../dist/dark.standalone.css', darkStandalone: 'dark.standalone',
light: '../dist/light.css', light: 'light',
lightStandalone: '../dist/light.standalone.css' lightStandalone: 'light.standalone'
};
const getSwitchThemePath = function () {
// Case: switch to "light.standalone.css"
if (
(themeSwitcher.current === themes.dark) && themeSwitcher.isDark ||
(themeSwitcher.current === themes.light) && themeSwitcher.isDark ||
themeSwitcher.current === themes.darkStandalone
) {
return themes.lightStandalone
// Case: switch to "dark.standalone.css"
} else if (
(themeSwitcher.current === themes.dark) && themeSwitcher.isLight ||
(themeSwitcher.current === themes.light) && themeSwitcher.isLight ||
themeSwitcher.current === themes.lightStandalone
) {
return themes.darkStandalone;
// Case: switch to "light.css"
} else if (themeSwitcher.current === themes.dark) {
return themes.light;
// Case: switch to "dark.css"
} else if (themeSwitcher.current === themes.light) {
return themes.dark;
// Case: switch destination is unknown
} else {
return themeSwitcher.current;
}
}; };
switchBtn.addEventListener('click', function() { themeSwitch.addEventListener('click', function() {
const readTheme = stylesheet.getAttribute('href'); themeSwitcher.switch(getSwitchThemePath());
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
}
}); });
})(
(function () {
const ThemeSwitcher = function(stylesheet) {
const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)');
const lightSchemeMql = matchMedia('(prefers-color-scheme: light)');
darkMql.addListener(function (mql) { this.themeDir = '../dist/';
if (mql.matches) { this.stylesheet = document.getElementById(stylesheet);
stylesheet.href = themes.dark; this.current = this.getThemeName(this.stylesheet.href);
} else { this.isDark = darkSchemeMql.matches;
stylesheet.href = themes.light; this.isLight = lightSchemeMql.matches;
};
ThemeSwitcher.prototype = {
switch: function (themeName) {
this.stylesheet.href = this.themeDir + themeName + '.css';
this.current = themeName;
},
getThemeName: function () {
const reg = new RegExp(this.themeDir + '(|.+?).css');
return stylesheet.getAttribute('href').replace(reg, '$1');
} }
}) };
})();
return ThemeSwitcher;
})()
);