tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Releases 2 Packages Activity Actions

use IIFE in app.html to prevent FOUC

Browse source
This commit is contained in:
Danny Liu 2024-03-17 00:25:33 -07:00
parent 41cb6d7a54
commit a57586a2b7
1 changed files with 29 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/app.html
View file

@ -8,34 +8,36 @@
<meta name="robots" content="noindex,nofollow" /> <meta name="robots" content="noindex,nofollow" />
<script> <script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC // On page load or when changing themes, best to add inline in `head` to avoid FOUC
if ( (() => {
localStorage.theme === 'light' || if (
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches) localStorage.theme === 'light' ||
) { (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
document.documentElement.classList.add('light'); ) {
} else if (localStorage.theme && localStorage.theme !== 'system') { document.documentElement.classList.add('light');
localStorage.theme.split(' ').forEach((e) => { } else if (localStorage.theme && localStorage.theme !== 'system') {
document.documentElement.classList.add(e); localStorage.theme.split(' ').forEach((e) => {
}); document.documentElement.classList.add(e);
} else if (localStorage.theme && localStorage.theme === 'system') { });
systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches; } else if (localStorage.theme && localStorage.theme === 'system') {
document.documentElement.classList.add(systemTheme ? 'dark' : 'light'); systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
} document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
else {
document.documentElement.classList.add('dark');
}
window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
if (localStorage.theme === 'system') {
if (e.matches) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
}
} }
}); else {
document.documentElement.classList.add('dark');
}
window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
if (localStorage.theme === 'system') {
if (e.matches) {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
}
}
});
})();
</script> </script>
%sveltekit.head% %sveltekit.head%