mirror of
https://github.com/kognise/water.css.git
synced 2025-12-07 07:14:57 +01:00
45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
(function () {
|
|
const switchBtn = document.getElementById('switch');
|
|
const stylesheet = document.getElementById('stylesheet');
|
|
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',
|
|
light: '../dist/light.css',
|
|
lightStandalone: '../dist/light.standalone.css'
|
|
};
|
|
|
|
switchBtn.addEventListener('click', function() {
|
|
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
|
|
}
|
|
});
|
|
|
|
darkMql.addListener(function (mql) {
|
|
if (mql.matches) {
|
|
stylesheet.href = themes.dark;
|
|
} else {
|
|
stylesheet.href = themes.light;
|
|
}
|
|
})
|
|
})();
|