mobile: Add dark mode support

4 files changed, 11 insertions, 15 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
index 7967b5c6..cf7e473f 100644
--- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,17 +1,13 @@
-import React, { useEffect } from "react";
-import { Platform } from "react-native";
-import * as NavigationBar from "expo-navigation-bar";
+import React from "react";
 import { Tabs } from "expo-router";
+import { StyledTabs } from "@/components/navigation/tabs";
 import { ClipboardList, Home, Search, Settings } from "lucide-react-native";
 
 export default function TabLayout() {
-  useEffect(() => {
-    if (Platform.OS == "android") {
-      NavigationBar.setBackgroundColorAsync("white");
-    }
-  }, []);
   return (
-    <Tabs
+    <StyledTabs
+      tabBarClassName="bg-gray-100 dark:bg-background pt-3"
+      sceneContainerClassName="bg-gray-100 dark:bg-background"
       screenOptions={{
         headerShown: false,
       }}
@@ -44,6 +40,6 @@ export default function TabLayout() {
           tabBarIcon: ({ color }) => <Settings color={color} />,
         }}
       />
-    </Tabs>
+    </StyledTabs>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index 767b9256..53817bf2 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -57,8 +57,8 @@ export default function Lists() {
         }}
         renderItem={(l) => (
           <Link asChild key={l.item.id} href={l.item.href}>
-            <Pressable className="mx-2 flex flex-row justify-between rounded-xl border border-gray-100 bg-white px-4 py-2">
-              <Text className="text-lg">
+            <Pressable className="mx-2 flex flex-row justify-between rounded-xl border border-input bg-white px-4 py-2 dark:bg-accent">
+              <Text className="text-lg text-accent-foreground">
                 {l.item.logo} {l.item.name}
               </Text>
               <ChevronRight color="rgb(0, 122, 255)" />
diff --git a/apps/mobile/app/dashboard/(tabs)/search.tsx b/apps/mobile/app/dashboard/(tabs)/search.tsx
index 0a4dcbfd..1a79b921 100644
--- a/apps/mobile/app/dashboard/(tabs)/search.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/search.tsx
@@ -34,7 +34,7 @@ export default function Search() {
             <PageTitle title="Search" />
             <Input
               placeholder="Search"
-              className="mx-4 bg-white"
+              className="mx-4"
               value={search}
               onChangeText={setSearch}
               autoFocus
diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index c2db2846..93033926 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -18,8 +18,8 @@ export default function Dashboard() {
     <CustomSafeAreaView>
       <PageTitle title="Settings" />
       <View className="flex h-full w-full items-center gap-4 px-4 py-2">
-        <View className="w-full rounded-lg bg-white px-4 py-2">
-          <Text className="text-lg">
+        <View className="w-full rounded-lg bg-white px-4 py-2 dark:bg-accent">
+          <Text className="text-lg text-accent-foreground">
             {isLoading ? "Loading ..." : data?.email}
           </Text>
         </View>