feat(mobile): Retheme the mobile app (#1872)

* Add nativewindui

* migrate to nativewindui text

* Replace buttons with nativewindui buttons

* Use nativewindui search input

* fix the divider color

* More changes

* fix manage tag icon

* fix styling of bookmark card

* fix ios compilation

* fix search clear

* fix tag pill border color

* Store theme setting in app settings

* fix setting color appearance

* fix coloring of search input

* fix following system theme

* add a save button to info

* fix the grey colors on android

* fix icon active tint color

* drop the use of TextField

4 files changed, 47 insertions, 44 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
index f1d90ee4..7419c348 100644
--- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,9 +1,11 @@
 import React, { useLayoutEffect } from "react";
 import { Tabs, useNavigation } from "expo-router";
 import { StyledTabs } from "@/components/navigation/tabs";
+import { useColorScheme } from "@/lib/useColorScheme";
 import { ClipboardList, Home, Settings } from "lucide-react-native";
 
 export default function TabLayout() {
+  const { colors } = useColorScheme();
   const navigation = useNavigation();
   // Hide the header on the parent screen
   useLayoutEffect(() => {
@@ -18,6 +20,7 @@ export default function TabLayout() {
       sceneClassName="bg-gray-100 dark:bg-background"
       screenOptions={{
         headerShown: false,
+        tabBarActiveTintColor: colors.foreground,
       }}
     >
       <Tabs.Screen
diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index f70474a9..0a51b817 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -1,4 +1,4 @@
-import { Platform, Pressable, Text, View } from "react-native";
+import { Platform, Pressable, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import * as ImagePicker from "expo-image-picker";
 import { router } from "expo-router";
@@ -6,6 +6,7 @@ import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import { TailwindResolver } from "@/components/TailwindResolver";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import PageTitle from "@/components/ui/PageTitle";
+import { Text } from "@/components/ui/Text";
 import { useToast } from "@/components/ui/Toast";
 import useAppSettings from "@/lib/settings";
 import { useUploadAsset } from "@/lib/upload";
@@ -89,16 +90,16 @@ export default function Home() {
               />
             </View>
             <Pressable
-              className="flex flex-row items-center gap-1 rounded-lg border border-input bg-background px-4 py-2.5"
+              className="flex flex-row items-center gap-1 rounded-lg border border-input bg-card px-4 py-1"
               onPress={() => router.push("/dashboard/search")}
             >
               <TailwindResolver
-                className="text-muted-foreground"
+                className="text-muted"
                 comp={(styles) => (
                   <Search size={16} color={styles?.color?.toString()} />
                 )}
               />
-              <Text className="text-muted-foreground">Search</Text>
+              <Text className="text-muted">Search</Text>
             </Pressable>
           </View>
         }
diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index 218c1de4..a2301c36 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -1,15 +1,17 @@
 import { useEffect, useState } from "react";
-import { FlatList, Pressable, Text, View } from "react-native";
+import { FlatList, Pressable, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import { Link, router } from "expo-router";
 import FullPageError from "@/components/FullPageError";
-import { TailwindResolver } from "@/components/TailwindResolver";
+import ChevronRight from "@/components/ui/ChevronRight";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
+import { Text } from "@/components/ui/Text";
 import { api } from "@/lib/trpc";
+import { useColorScheme } from "@/lib/useColorScheme";
 import { condProps } from "@/lib/utils";
-import { ChevronRight, Plus } from "lucide-react-native";
+import { Plus } from "lucide-react-native";
 
 import { useBookmarkLists } from "@karakeep/shared-react/hooks/lists";
 import { ZBookmarkListTreeNode } from "@karakeep/shared/utils/listUtils";
@@ -65,6 +67,7 @@ function traverseTree(
 }
 
 export default function Lists() {
+  const { colors } = useColorScheme();
   const [refreshing, setRefreshing] = useState(false);
   const { data: lists, isPending, error, refetch } = useBookmarkLists();
   const [showChildrenOf, setShowChildrenOf] = useState<Record<string, boolean>>(
@@ -130,7 +133,7 @@ export default function Lists() {
         }}
         renderItem={(l) => (
           <View
-            className="mx-2 flex flex-row items-center rounded-xl border border-input bg-white px-4 py-2 dark:bg-accent"
+            className="mx-2 flex flex-row items-center rounded-xl border border-input bg-card px-4 py-2"
             style={condProps({
               condition: l.item.level > 0,
               props: { marginLeft: l.item.level * 20 },
@@ -146,28 +149,23 @@ export default function Lists() {
                   }));
                 }}
               >
-                <TailwindResolver
-                  className="text-foreground"
-                  comp={(style) => (
-                    <ChevronRight
-                      color={style?.color?.toString()}
-                      style={{
-                        transform: [
-                          { rotate: l.item.collapsed ? "0deg" : "90deg" },
-                        ],
-                      }}
-                    />
-                  )}
+                <ChevronRight
+                  color={colors.foreground}
+                  style={{
+                    transform: [
+                      { rotate: l.item.collapsed ? "0deg" : "90deg" },
+                    ],
+                  }}
                 />
               </Pressable>
             )}
 
             <Link asChild key={l.item.id} href={l.item.href} className="flex-1">
               <Pressable className="flex flex-row justify-between">
-                <Text className="text-lg text-accent-foreground">
+                <Text>
                   {l.item.logo} {l.item.name}
                 </Text>
-                <ChevronRight color="rgb(0, 122, 255)" />
+                <ChevronRight />
               </Pressable>
             </Link>
           </View>
diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index 7b3dab4f..6d76308d 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -1,16 +1,17 @@
 import { useEffect } from "react";
-import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { ActivityIndicator, Pressable, View } from "react-native";
 import { Slider } from "react-native-awesome-slider";
 import { useSharedValue } from "react-native-reanimated";
 import { Link } from "expo-router";
 import { Button } from "@/components/ui/Button";
+import ChevronRight from "@/components/ui/ChevronRight";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import { Divider } from "@/components/ui/Divider";
 import PageTitle from "@/components/ui/PageTitle";
+import { Text } from "@/components/ui/Text";
 import { useSession } from "@/lib/session";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
-import { ChevronRight } from "lucide-react-native";
 
 export default function Dashboard() {
   const { logout } = useSession();
@@ -38,56 +39,50 @@ export default function Dashboard() {
     <CustomSafeAreaView>
       <PageTitle title="Settings" />
       <View className="flex h-full w-full items-center gap-3 px-4 py-2">
-        <View className="flex w-full gap-3 rounded-lg bg-white px-4 py-2 dark:bg-accent">
-          <Text className="text-lg text-accent-foreground">
-            {isSettingsLoading ? "Loading ..." : settings.address}
-          </Text>
+        <View className="flex w-full gap-3 rounded-lg bg-card px-4 py-2">
+          <Text>{isSettingsLoading ? "Loading ..." : settings.address}</Text>
           <Divider orientation="horizontal" />
-          <Text className="text-lg text-accent-foreground">
-            {isLoading ? "Loading ..." : data?.email}
-          </Text>
+          <Text>{isLoading ? "Loading ..." : data?.email}</Text>
         </View>
         <Text className="w-full p-1 text-2xl font-bold text-foreground">
           App Settings
         </Text>
-        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 dark:bg-accent">
+        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-card px-4 py-2">
           <Link asChild href="/dashboard/settings/theme" className="flex-1">
             <Pressable className="flex flex-row justify-between">
-              <Text className="text-lg text-accent-foreground">Theme</Text>
+              <Text>Theme</Text>
               <View className="flex flex-row items-center gap-2">
-                <Text className="text-lg text-muted-foreground">
+                <Text className="text-muted-foreground">
                   {
                     { light: "Light", dark: "Dark", system: "System" }[
                       settings.theme
                     ]
                   }
                 </Text>
-                <ChevronRight color="rgb(0, 122, 255)" />
+                <ChevronRight />
               </View>
             </Pressable>
           </Link>
         </View>
-        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 dark:bg-accent">
+        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-card px-4 py-2">
           <Link
             asChild
             href="/dashboard/settings/bookmark-default-view"
             className="flex-1"
           >
             <Pressable className="flex flex-row justify-between">
-              <Text className="text-lg text-accent-foreground">
-                Default Bookmark View
-              </Text>
+              <Text>Default Bookmark View</Text>
               <View className="flex flex-row items-center gap-2">
                 {isSettingsLoading ? (
                   <ActivityIndicator size="small" />
                 ) : (
-                  <Text className="text-lg text-muted-foreground">
+                  <Text className="text-muted-foreground">
                     {settings.defaultBookmarkView === "reader"
                       ? "Reader"
                       : "Browser"}
                   </Text>
                 )}
-                <ChevronRight color="rgb(0, 122, 255)" />
+                <ChevronRight />
               </View>
             </Pressable>
           </Link>
@@ -95,8 +90,8 @@ export default function Dashboard() {
         <Text className="w-full p-1 text-2xl font-bold text-foreground">
           Upload Settings
         </Text>
-        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 dark:bg-accent">
-          <Text className="text-lg text-accent-foreground">Image Quality</Text>
+        <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-card px-4 py-2">
+          <Text>Image Quality</Text>
           <View className="flex flex-1 flex-row items-center justify-center gap-2">
             <Text className="text-foreground">
               {Math.round(settings.imageQuality * 100)}%
@@ -115,7 +110,13 @@ export default function Dashboard() {
           </View>
         </View>
         <Divider orientation="horizontal" />
-        <Button className="w-full" label="Log Out" onPress={logout} />
+        <Button
+          androidRootClassName="w-full"
+          onPress={logout}
+          variant="destructive"
+        >
+          <Text>Log Out</Text>
+        </Button>
       </View>
     </CustomSafeAreaView>
   );