feat: Add HTML root component with theme initialization and improve theme state retrieval

2025-12-27 16:14:46 +01:00
parent dcab4be87d
commit a16efd8f59
2 changed files with 57 additions and 2 deletions
@@ -0,0 +1,43 @@
+import { ScrollViewStyleReset } from 'expo-router/html';
+import { type PropsWithChildren } from 'react';
+
+export default function Root({ children }: PropsWithChildren) {
+    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');
+                  if (stored) {
+                    var parsed = JSON.parse(stored);
+                    if (parsed && parsed.state) {
+                      isDark = parsed.state.isDark;
+                    }
+                  } else {
+                    isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  }
+
+                  if (isDark) {
+                    document.body.style.backgroundColor = '#121212';
+                  } else {
+                    document.body.style.backgroundColor = '#ffffff';
+                  }
+                } catch (e) {}
+              })();
+            `,
+                }}
+            />
+            <ScrollViewStyleReset />
+        </head>
+        <body>{children}</body>
+        </html>
+    );
+}
@@ -4,10 +4,22 @@ import {Platform} from 'react-native';
 import * as SecureStore from 'expo-secure-store';
 import {CustomMD3Theme, darkTheme, lightTheme} from '@/src/core/theme';

-const getSystemThemeIsDark = () => {
+const getInitialThemeState = () => {
    if (Platform.OS === 'web' && typeof window !== 'undefined') {
+        try {
+            const storedString = localStorage.getItem('theme-storage');
+            if (storedString) {
+                const parsed = JSON.parse(storedString);
+                if (parsed && parsed.state && typeof parsed.state.isDark === 'boolean') {
+                    return parsed.state.isDark;
+                }
+            }
+        } catch (_) {
+        }
+
        return window.matchMedia('(prefers-color-scheme: dark)').matches;
    }
+
    return false;
 };

@@ -45,7 +57,7 @@ interface ThemeState {
 export const useThemeStore = create<ThemeState>()(
    persist(
        (set, get) => {
-            const initialDark = getSystemThemeIsDark();
+            const initialDark = getInitialThemeState();

            return {
                theme: initialDark ? darkTheme : lightTheme,