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 themeSwitcher event

Browse Source
This commit is contained in:
kimulaco
2019-05-29 22:45:30 +09:00
parent 5de6636a1b
commit b5e06b5768
1 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
script.js
View File

@@ -1,13 +1,13 @@
(function (ThemeSwitcher) { (function (ThemeSwitcher) {
const themeSwitcher = new ThemeSwitcher('stylesheet'); const themeSwitcher = new ThemeSwitcher('stylesheet');
const themeSwitch = document.getElementById('theme-switch'); const themeSwitchBtn = document.getElementById('switch');
const themes = { const themes = {
dark: 'dark', dark: 'dark',
darkStandalone: 'dark.standalone', darkStandalone: 'dark.standalone',
light: 'light', light: 'light',
lightStandalone: 'light.standalone' lightStandalone: 'light.standalone'
}; };
const getSwitchThemePath = function () { const getSwitchThemeName = function () {
// Case: switch to "light.standalone.css" // Case: switch to "light.standalone.css"
if ( if (
(themeSwitcher.current === themes.dark) && themeSwitcher.isDark || (themeSwitcher.current === themes.dark) && themeSwitcher.isDark ||
@@ -37,21 +37,45 @@
return themeSwitcher.current; return themeSwitcher.current;
} }
}; };
const getGeneralThemeName = function () {
return themeSwitcher.current.replace(/\.standalone/g, '');
};
themeSwitch.addEventListener('click', function() { themeSwitchBtn.addEventListener('click', function() {
themeSwitcher.switch(getSwitchThemePath()); themeSwitcher.switch(getSwitchThemeName());
}); });
themeSwitcher.onChangeDark = function () {
themeSwitcher.switch(getGeneralThemeName());
};
themeSwitcher.onChangeLight = function () {
themeSwitcher.switch(getGeneralThemeName());
};
})( })(
(function () { (function () {
const ThemeSwitcher = function(stylesheet) { const ThemeSwitcher = function(stylesheet) {
const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)'); const darkSchemeMql = matchMedia('(prefers-color-scheme: dark)');
const lightSchemeMql = matchMedia('(prefers-color-scheme: light)'); const lightSchemeMql = matchMedia('(prefers-color-scheme: light)');
const that = this;
this.themeDir = '../dist/'; this.themeDir = '../dist/';
this.stylesheet = document.getElementById(stylesheet); this.stylesheet = document.getElementById(stylesheet);
this.current = this.getThemeName(this.stylesheet.href); this.current = this.getThemeName(this.stylesheet.href);
this.isDark = darkSchemeMql.matches; this.isDark = darkSchemeMql.matches;
this.isLight = lightSchemeMql.matches; this.isLight = lightSchemeMql.matches;
darkSchemeMql.addListener(function (mql) {
if (mql.matches && typeof that.onChangeDark === 'function') {
that.onChangeDark()
}
});
lightSchemeMql.addListener(function (mql) {
if (mql.matches && typeof that.onChangeLight === 'function') {
that.onChangeLight()
}
});
}; };
ThemeSwitcher.prototype = { ThemeSwitcher.prototype = {
@@ -62,7 +86,9 @@
getThemeName: function () { getThemeName: function () {
const reg = new RegExp(this.themeDir + '(|.+?).css'); const reg = new RegExp(this.themeDir + '(|.+?).css');
return stylesheet.getAttribute('href').replace(reg, '$1'); return stylesheet.getAttribute('href').replace(reg, '$1');
} },
onChangeDark: null,
onChangeLight: null
}; };
return ThemeSwitcher; return ThemeSwitcher;