Project-Name-Here/assetflow
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed theme switcher

Browse Source
This commit is contained in:
Leon
2023-05-20 22:04:46 +02:00
parent 9411f1ad72
commit 713cadcba1
2 changed files with 31 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
static/js/handleColorMode.js Normal file
View File

@ -0,0 +1,30 @@
// Listen for changes in the prefers-color-scheme media query and update the "data-bs-theme" attribute on the <html> element.
// TODO: Probably migrate theme mode storage to api.
function updateColorMode() {
const currentTheme = localStorage.getItem('bs.theme') ?? 'auto';
const isDark = currentTheme === 'dark';
const isLight = currentTheme === 'light';
const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
if (currentTheme === 'auto') {
if (prefersLight) {
document.documentElement.setAttribute('data-bs-theme', 'light');
} else {
document.documentElement.setAttribute('data-bs-theme', 'dark');
}
} else if (isDark) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else if (isLight) {
document.documentElement.setAttribute('data-bs-theme', 'light');
}
}
(function () {
const mql = window.matchMedia('(prefers-color-scheme: dark)');
mql.addEventListener('change', () => {
updateColorMode();
});
updateColorMode();
})();