Commit a57586a2 authored by Danny Liu's avatar Danny Liu
Browse files

use IIFE in app.html to prevent FOUC

parent 41cb6d7a
...@@ -8,34 +8,36 @@ ...@@ -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'); else {
} document.documentElement.classList.add('dark');
}
window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => { window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
if (localStorage.theme === 'system') { if (localStorage.theme === 'system') {
if (e.matches) { if (e.matches) {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light'); document.documentElement.classList.remove('light');
} else { } else {
document.documentElement.classList.add('light'); document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
}
} }
} });
}); })();
</script> </script>
%sveltekit.head% %sveltekit.head%
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment