Merge pull request 'Changes in background and dark mode' (#28) from bg_fixes_ into main

Reviewed-on: #28

apps/frontend-mobile/app/_layout.tsx

@@ -81,24 +81,34 @@ function RootLayoutInner() {
   );
 }
 
-export default function RootLayout() {
+function ThemedBackground({ children }: { children: React.ReactNode }) {
+  const { isDark } = useThemeContext();
+
   return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
     <ImageBackground
-        source={require('../assets/bg.png')}
+      source={isDark ? require('../assets/bg_dark.png') : require('../assets/bg.png')}
       style={bgStyles.background}
       resizeMode="cover"
       imageStyle={bgStyles.backgroundImage}
     >
-      <View style={bgStyles.overlay} />
+      <View style={[bgStyles.overlay, isDark && bgStyles.overlayDark]} />
+      {children}
+    </ImageBackground>
+  );
+}
+
+export default function RootLayout() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider>
         <QueryClientProvider client={queryClient}>
           <ThemeProvider>
+            <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)',
   },
 });

apps/frontend-mobile/constants/theme.ts

@@ -26,7 +26,7 @@ export const colors = {
   warning: '#FF9500',
 
   // Surface
-  background: '#fbfbfb',
+  background: 'transparent',
   card: '#ffffff',
   surfaceLow: '#f2f4f5',
   surface: '#eceeef',
@@ -72,7 +72,7 @@ export const darkColors = {
   warning: '#FF9500',
 
   // Surface
-  background: '#121212',
+  background: 'transparent',
   card: '#1e1e1e',
   surfaceLow: '#2a2a2a',
   surface: '#333333',