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 Meier 2023-05-20 22:04:46 +02:00
parent 9411f1ad72
commit 713cadcba1
2 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/frontend/partials/head.eta.html
View File

@ -11,6 +11,7 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<script src="/js/handleColorMode.js"></script>
<script src="/js/normalizeToast.js"></script> <script src="/js/normalizeToast.js"></script>
<script src="/static/jquery/dist/jquery.min.js"></script> <script src="/static/jquery/dist/jquery.min.js"></script>
<script src="/js/toastHandler.js"></script> <script src="/js/toastHandler.js"></script>
@ -20,29 +21,7 @@
<script src="/static/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/static/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/static/@popperjs/core/dist/umd/popper.min.js"></script> <script src="/static/@popperjs/core/dist/umd/popper.min.js"></script>
<script src="/static/tsparticles-confetti/tsparticles.confetti.bundle.min.js"></script> <script src="/static/tsparticles-confetti/tsparticles.confetti.bundle.min.js"></script>
<script>
// Listen for changes in the prefers-color-scheme media query and update the "data-bs-theme" attribute on the <html> element.
(function () {
const currentTheme = localStorage.getItem('bs.theme') ?? 'auto';
const isDark = currentTheme === 'dark';
const isLight = currentTheme === 'light';
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
if (currentTheme === 'auto') {
if (prefersDark) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else if (prefersLight) {
document.documentElement.setAttribute('data-bs-theme', 'light');
}
} else if (isDark) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else if (isLight) {
document.documentElement.setAttribute('data-bs-theme', 'light');
}
})();
</script>
</head> </head>
<body> <body>
<!-- The body and html tag need to be left open! --> <!-- The body and html tag need to be left open! -->

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();
})();