From c46482cdaaf883971736488750513663dd023076 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 17 Apr 2024 17:56:21 +0100
Subject: mobile: Add dark mode support

---
 apps/mobile/app/_layout.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

(limited to 'apps/mobile/app/_layout.tsx')

diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index f36c9eec..a5aafb8c 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -7,11 +7,15 @@ import { useRouter } from "expo-router";
 import { Stack } from "expo-router/stack";
 import { ShareIntentProvider, useShareIntent } from "expo-share-intent";
 import { StatusBar } from "expo-status-bar";
+import { StyledStack } from "@/components/navigation/stack";
 import { Providers } from "@/lib/providers";
+import { cn } from "@/lib/utils";
+import { useColorScheme } from "nativewind";
 
 export default function RootLayout() {
   const router = useRouter();
   const { hasShareIntent } = useShareIntent();
+  const { colorScheme } = useColorScheme();
 
   useEffect(() => {
     if (hasShareIntent) {
@@ -24,8 +28,14 @@ export default function RootLayout() {
   return (
     <ShareIntentProvider>
       <Providers>
-        <View className="w-full flex-1 bg-background">
-          <Stack
+        <View
+          className={cn(
+            "w-full flex-1 bg-gray-100 text-foreground dark:bg-background",
+            colorScheme == "dark" ? "dark" : "light",
+          )}
+        >
+          <StyledStack
+            contentClassName="bg-gray-100 dark:bg-background"
             screenOptions={{
               headerShown: false,
             }}
@@ -37,7 +47,7 @@ export default function RootLayout() {
                 presentation: "modal",
               }}
             />
-          </Stack>
+          </StyledStack>
           <StatusBar style="auto" />
         </View>
       </Providers>
-- 
cgit v1.2.3-70-g09d2