From a57586a2b7f95d2d355a2a1b06aa6f7fcceb033a Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sun, 17 Mar 2024 00:25:33 -0700
Subject: [PATCH] use IIFE in app.html to prevent FOUC

---
 src/app.html | 56 +++++++++++++++++++++++++++-------------------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/app.html b/src/app.html
index 931db8aa5..69f1b56e1 100644
--- a/src/app.html
+++ b/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');
-			}
-
-			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');
-					}
+			(() => {
+				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');
+						}
+					}
+				});		
+			})();
 		</script>
 
 		%sveltekit.head%