fix darkMode theme on apps

windmill-labs · Nov 26, 2024 · 66235c0 · 66235c0
1 parent e92750c
commit 66235c0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -875,15 +875,15 @@
 	const dispatch = createEventDispatcher()
 
 	function setTheme(newDarkMode: boolean | undefined) {
-		if (
-			newDarkMode === true ||
-			(newDarkMode === null && window.localStorage.getItem('dark-mode') === 'dark')
-		) {
+		let globalDarkMode = window.localStorage.getItem('dark-mode')
+			? window.localStorage.getItem('dark-mode') === 'dark'
+			: window.matchMedia('(prefers-color-scheme: dark)').matches
+		if (newDarkMode === true || (newDarkMode === null && globalDarkMode)) {
 			document.documentElement.classList.add('dark')
 		} else if (newDarkMode === false) {
 			document.documentElement.classList.remove('dark')
 		}
-		$darkMode = newDarkMode ?? false
+		$darkMode = newDarkMode ?? globalDarkMode
 	}
 
 	let priorDarkMode = document.documentElement.classList.contains('dark')

diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -82,10 +82,10 @@
 	})
 
 	function setTheme(darkMode: boolean | undefined) {
-		if (
-			darkMode === true ||
-			(darkMode === null && window.localStorage.getItem('dark-mode') === 'dark')
-		) {
+		let globalDarkMode = window.localStorage.getItem('dark-mode')
+			? window.localStorage.getItem('dark-mode') === 'dark'
+			: window.matchMedia('(prefers-color-scheme: dark)').matches
+		if (darkMode === true || (darkMode === null && globalDarkMode)) {
 			document.documentElement.classList.add('dark')
 		} else if (darkMode === false) {
 			document.documentElement.classList.remove('dark')