chore: update background color handling and splash logic for improved theming

2025-12-27 17:39:02 +01:00
parent a16efd8f59
commit fce74f74a8
8 changed files with 35 additions and 38 deletions
@@ -1,23 +1,27 @@
 import { ScrollViewStyleReset } from 'expo-router/html';
 import { type PropsWithChildren } from 'react';

+import { lightColors, darkColors } from '@/src/core/colors';
+
 export default function Root({ children }: PropsWithChildren) {
+    const lightBg = lightColors.background;
+    const darkBg = darkColors.background;
+
    return (
        <html lang="de">
        <head>
            <meta charSet="utf-8" />
            <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-
            <script
                dangerouslySetInnerHTML={{
                    __html: `
              (function() {
                try {
-                  var isDark = false;
-                  var stored = localStorage.getItem('theme-storage');
+                  let isDark = false;
+                  let stored = localStorage.getItem('theme-storage');
                  if (stored) {
-                    var parsed = JSON.parse(stored);
+                    let parsed = JSON.parse(stored);
                    if (parsed && parsed.state) {
                      isDark = parsed.state.isDark;
                    }
@@ -25,12 +29,12 @@ export default function Root({ children }: PropsWithChildren) {
                    isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                  }

-                  if (isDark) {
-                    document.body.style.backgroundColor = '#121212';
-                  } else {
-                    document.body.style.backgroundColor = '#ffffff';
-                  }
-                } catch (e) {}
+                  let color = isDark ? '${darkBg}' : '${lightBg}';
+                  document.documentElement.style.setProperty('background-color', color, 'important');
+                  
+                } catch (e) {
+                    console.error('Splash script failed', e);
+                }
              })();
            `,
                }}
@@ -1,14 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-
-body {
-    background-color: #ffffff;
-}
-
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #121212 !important;
-    }
-}
@@ -10,12 +10,12 @@ const AuthenticatedWrapper: React.FC<{ children: React.ReactNode }> = ({children
    const {isHydrated: themeHydrated} = useThemeStore();

    useEffect(() => {
-        if (authHydrated && themeHydrated) {
+        if (authHydrated && themeHydrated && !loading) {
            SplashScreen.hideAsync().catch(() => {});
        }
-    }, [authHydrated, themeHydrated]);
+    }, [authHydrated, themeHydrated, loading]);

-    if (!authHydrated || !themeHydrated || loading) {
+    if (!authHydrated || !themeHydrated || loading || isAuthenticated === null) {
        return <SplashScreenComponent/>;
    }

@@ -1,26 +1,21 @@
 import React from 'react';
-import { View, Image, useColorScheme } from 'react-native';
-import { useThemeStore } from '@/src/stores/themeStore';
+import { View, Image } from 'react-native';

 export default function SplashScreenComponent() {
-    const systemColorScheme = useColorScheme();
-
-    const { isDark, isHydrated } = useThemeStore();
-
-    const effectiveIsDark = isHydrated ? isDark : systemColorScheme === 'dark';

    return (
        <View
            style={{
                flex: 1,
-                backgroundColor: effectiveIsDark ? '#121212' : '#ffffff',
+                backgroundColor: 'transparent',
                alignItems: 'center',
                justifyContent: 'center'
            }}
        >
            <Image
                source={require('@/assets/images/racoon-splash.png')}
-                style={{ width: 200, resizeMode: 'contain' }}
+                style={{ width: 200 }}
+                resizeMode="contain"
            />
        </View>
    );
@@ -1,13 +1,16 @@
 import React from "react";
-import {Slot, Stack} from "expo-router";
+import {Stack} from "expo-router";
 import {useThemeStore} from "@/src/stores";


 export default function CustomStack() {
    const { theme } = useThemeStore();
    return (
-        <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: theme.colors.background } }}>
-            <Slot />
-        </Stack>
+        <Stack
+            screenOptions={{
+                headerShown: false,
+                contentStyle: { backgroundColor: theme.colors.background }
+            }}
+        />
    );
 }
@@ -68,6 +68,8 @@ export const useAuthStore = create<AuthState>()(

            checkAuthStatus: async () => {
                const state = get();
+
+                set({ loading: true });
                try {
                    if (Platform.OS !== 'web' && !state.token) {
                        set({ isAuthenticated: false, loading: false });
@@ -80,7 +80,9 @@ export const useThemeStore = create<ThemeState>()(
            onRehydrateStorage: () => (state) => {
                if (state) {
                    state.theme = state.isDark ? darkTheme : lightTheme;
-                    state.setHydrated();
+                    setTimeout(() => {
+                        state.setHydrated();
+                    }, 0)
                }
            },
        }
@@ -3,6 +3,7 @@
  "compilerOptions": {
    "strict": true,
    "composite": true,
+    "allowJs": true,
    "paths": {
      "@/*": [
        "./*"
@@ -12,6 +13,7 @@
  "include": [
    "**/*.ts",
    "**/*.tsx",
+    "src/core/colors.js",
    ".expo/types/**/*.ts",
    "expo-env.d.ts",
    "nativewind-env.d.ts"