From fb00f511075b26b9b9c1093c722da5bb30a00bf2 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 28 Jul 2025 00:20:16 +0200
Subject: [PATCH] Set last known app theme background color until theme is
 loaded

---
 index.html                                          | 13 +++++++++++++
 .../theme/contexts/AppThemeContextProvider.tsx      |  8 ++++++++
 2 files changed, 21 insertions(+)

diff --git a/index.html b/index.html
index 2c8b1646..9b5f2b73 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,19 @@
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <script type="module" src="./src/index.tsx"></script>
+<script>
+    const backgroundColor = (() => {
+        try {
+            return JSON.parse(window.localStorage.getItem("theme_background"))
+        } catch (e) {
+            return null
+        }
+    })();
+
+    if (backgroundColor) {
+        document.documentElement.style.backgroundColor = backgroundColor;
+    }
+</script>
 <!--
   This HTML file is a template.
   If you open it directly in the browser, you will see an empty page.
diff --git a/src/modules/theme/contexts/AppThemeContextProvider.tsx b/src/modules/theme/contexts/AppThemeContextProvider.tsx
index 86da6b6c..cd14a294 100644
--- a/src/modules/theme/contexts/AppThemeContextProvider.tsx
+++ b/src/modules/theme/contexts/AppThemeContextProvider.tsx
@@ -22,6 +22,7 @@ import { createAndSetTheme } from '@/modules/theme/services/ThemeCreator.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
+import { AppStorage } from '@/lib/storage/AppStorage.ts';
 
 export const AppThemeContextProvider = ({ children }: { children: ReactNode }) => {
     const { t, i18n } = useTranslation();
@@ -102,6 +103,13 @@ export const AppThemeContextProvider = ({ children }: { children: ReactNode }) =
         }
     }, [serverAppTheme, localAppTheme]);
 
+    useEffect(() => {
+        // The set background color is not necessary anymore, since the theme has been loaded
+        document.documentElement.style.backgroundColor = '';
+
+        AppStorage.local.setItem('theme_background', theme.palette.background.default);
+    }, [theme.palette.background.default]);
+
     if (directionRef.current !== currentDirection) {
         document.dir = currentDirection;
         directionRef.current = currentDirection;