add event listener in app.html to handle system theme changes

mmartel86 · Mar 17, 2024 · f1716f4 · f1716f4
1 parent 6f3acb3
commit f1716f4
Showing 1 changed file with 18 additions and 2 deletions.
diff --git 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%