From f1716f45b9a9ce46aa8e98be9f414ff2c3d1cae4 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Sat, 16 Mar 2024 23:14:38 -0700
Subject: [PATCH] add event listener in app.html to handle system theme changes

---
 src/app.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/app.html b/src/app.html
index 6216e56fa..931db8aa5 100644
--- a/src/app.html
+++ b/src/app.html
@@ -13,13 +13,29 @@
 				(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
 			) {
 				document.documentElement.classList.add('light');
-			} else if (localStorage.theme) {
+			} else if (localStorage.theme && localStorage.theme !== 'system') {
 				localStorage.theme.split(' ').forEach((e) => {
 					document.documentElement.classList.add(e);
 				});
-			} else {
+			} 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%