From 0531030895252a4cbae652a1c0e8e36ecb783c96 Mon Sep 17 00:00:00 2001 From: Ruben Fiszel Date: Tue, 26 Nov 2024 17:44:28 +0100 Subject: [PATCH] fix darkMode theme on apps --- .../lib/components/apps/editor/AppEditorHeader.svelte | 10 +++++----- .../src/lib/components/apps/editor/AppPreview.svelte | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte index 550f3bb9d3..3ad0398853 100644 --- 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 index 473684219d..d9f68dede8 100644 --- 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')