ソースを参照

use IIFE in app.html to prevent FOUC

Danny Liu 1 年間 前
コミット
a57586a2b7
1 ファイル変更28 行追加26 行削除
  1. 28 26
      src/app.html

+ 28 - 26
src/app.html

@@ -8,34 +8,36 @@
 		<meta name="robots" content="noindex,nofollow" />
 		<script>
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
-			if (
-				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') {
-				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;
-				document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
-			}
-			else {
-				document.documentElement.classList.add('dark');
-			}
+			(() => {
+				if (
+					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') {
+					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;
+					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');
+				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>
 
 		%sveltekit.head%