Set last known app theme background color until theme is loaded

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.

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;