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

Update switch theme script

Browse Source
This commit is contained in:
kimulaco
2019-05-29 15:40:45 +09:00
parent a0218614e4
commit 7712f6aab9
2 changed files with 36 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -52,7 +52,7 @@
<p>
In fact, try resizing this page. Everything flows super nicely as you'll see.
</p>
<button id='switch'>Switch theme</button>
<button type="button" id='switch'>Switch theme</button>
<h2>Element demos</h2>
<p>

38
script.js
View File

@@ -1,4 +1,36 @@
document.getElementById('switch').addEventListener('click', function() {
(function () {
const switchBtn = document.getElementById('switch');
const stylesheet = document.getElementById('stylesheet');
stylesheet.href = stylesheet.href.replace(/dark|light/, function(replaced) { return replaced === 'dark' ? 'light' : 'dark' });
});
const mql = matchMedia('(prefers-color-scheme: dark)');
const themes = {
dark: '../dist/dark.css',
darkStandalone: '../dist/dark.standalone.css',
light: '../dist/light.css',
lightStandalone: '../dist/light.standalone.css'
};
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;
}
});
mql.addListener(function (mql) {
if (mql.matches) {
stylesheet.href = themes.dark;
} else {
stylesheet.href = themes.light;
}
})
})();