mirror of
https://github.com/kognise/water.css.git
synced 2025-08-13 16:44:58 +02:00
Update switch theme script
This commit is contained in:
@@ -52,7 +52,7 @@
|
|||||||
<p>
|
<p>
|
||||||
In fact, try resizing this page. Everything flows super nicely as you'll see.
|
In fact, try resizing this page. Everything flows super nicely as you'll see.
|
||||||
</p>
|
</p>
|
||||||
<button id='switch'>Switch theme</button>
|
<button type="button" id='switch'>Switch theme</button>
|
||||||
|
|
||||||
<h2>Element demos</h2>
|
<h2>Element demos</h2>
|
||||||
<p>
|
<p>
|
||||||
|
36
script.js
36
script.js
@@ -1,4 +1,36 @@
|
|||||||
document.getElementById('switch').addEventListener('click', function() {
|
(function () {
|
||||||
|
const switchBtn = document.getElementById('switch');
|
||||||
const stylesheet = document.getElementById('stylesheet');
|
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;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})();
|
||||||
|
Reference in New Issue
Block a user