Changes in background and dark mode

2026-07-10 12:41:10 +02:00
parent 02cab5f740
commit d371fd2bb7
3 changed files with 26 additions and 13 deletions
@@ -81,24 +81,34 @@ function RootLayoutInner() {
  );
 }

+function ThemedBackground({ children }: { children: React.ReactNode }) {
+  const { isDark } = useThemeContext();
+
+  return (
+    <ImageBackground
+      source={isDark ? require('../assets/bg_dark.png') : require('../assets/bg.png')}
+      style={bgStyles.background}
+      resizeMode="cover"
+      imageStyle={bgStyles.backgroundImage}
+    >
+      <View style={[bgStyles.overlay, isDark && bgStyles.overlayDark]} />
+      {children}
+    </ImageBackground>
+  );
+}
+
 export default function RootLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
-      <ImageBackground
-        source={require('../assets/bg.png')}
-        style={bgStyles.background}
-        resizeMode="cover"
-        imageStyle={bgStyles.backgroundImage}
-      >
-      <View style={bgStyles.overlay} />
      <SafeAreaProvider>
        <QueryClientProvider client={queryClient}>
          <ThemeProvider>
-            <RootLayoutInner />
+            <ThemedBackground>
+              <RootLayoutInner />
+            </ThemedBackground>
          </ThemeProvider>
        </QueryClientProvider>
      </SafeAreaProvider>
-      </ImageBackground>
    </GestureHandlerRootView>
  );
 }
@@ -108,10 +118,13 @@ const bgStyles = StyleSheet.create({
    flex: 1,
  },
  backgroundImage: {
-    opacity: 0.8,
+    opacity: 0.55,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(255, 252, 245, 0.2)',
+    backgroundColor: 'rgba(255, 252, 245, 0.48)',
+  },
+  overlayDark: {
+    backgroundColor: 'rgba(0, 0, 0, 0.25)',
  },
 });