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

5 files changed, 15 insertions, 22 deletions

diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx
index 461967b4..e4c2eee8 100644
--- a/apps/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx
@@ -7,7 +7,6 @@ import {
   Pressable,
   ScrollView,
   Share,
-  Text,
   View,
 } from "react-native";
 import * as Clipboard from "expo-clipboard";
@@ -15,6 +14,7 @@ import * as FileSystem from "expo-file-system";
 import * as Haptics from "expo-haptics";
 import { router, useRouter } from "expo-router";
 import * as Sharing from "expo-sharing";
+import { Text } from "@/components/ui/Text";
 import useAppSettings from "@/lib/settings";
 import { api } from "@/lib/trpc";
 import { MenuView } from "@react-native-menu/menu";
@@ -332,9 +332,7 @@ function LinkCard({
         <TagList bookmark={bookmark} />
         <Divider orientation="vertical" className="mt-2 h-0.5 w-full" />
         <View className="mt-2 flex flex-row justify-between px-2 pb-2">
-          <Text className="my-auto line-clamp-1 text-foreground">
-            {parsedUrl.host}
-          </Text>
+          <Text className="my-auto line-clamp-1">{parsedUrl.host}</Text>
           <ActionBar bookmark={bookmark} />
         </View>
       </View>
@@ -357,7 +355,7 @@ function TextCard({
     <View className="flex max-h-96 gap-2 p-2">
       <Pressable onPress={onOpenBookmark}>
         {bookmark.title && (
-          <Text className="line-clamp-2 text-xl font-bold text-foreground">
+          <Text className="line-clamp-2 text-xl font-bold">
             {bookmark.title}
           </Text>
         )}
@@ -404,9 +402,7 @@ function AssetCard({
       <View className="flex gap-2 p-2">
         <Pressable onPress={onOpenBookmark}>
           {title && (
-            <Text className="line-clamp-2 text-xl font-bold text-foreground">
-              {title}
-            </Text>
+            <Text className="line-clamp-2 text-xl font-bold">{title}</Text>
           )}
         </Pressable>
         <TagList bookmark={bookmark} />
@@ -481,9 +477,5 @@ export default function BookmarkCard({
       break;
   }
 
-  return (
-    <View className="overflow-hidden rounded-xl border-b border-accent bg-background">
-      {comp}
-    </View>
-  );
+  return <View className="overflow-hidden rounded-xl bg-card">{comp}</View>;
 }
diff --git a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
index c4a059cc..730bcd08 100644
--- a/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkLinkPreview.tsx
@@ -1,11 +1,12 @@
 import { useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import { Pressable, View } from "react-native";
 import ImageView from "react-native-image-viewing";
 import WebView from "react-native-webview";
 import { WebViewSourceUri } from "react-native-webview/lib/WebViewTypes";
+import { Text } from "@/components/ui/Text";
 import { useAssetUrl } from "@/lib/hooks";
 import { api } from "@/lib/trpc";
-import { useColorScheme } from "nativewind";
+import { useColorScheme } from "@/lib/useColorScheme";
 
 import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks";
 
@@ -36,7 +37,7 @@ export function BookmarkLinkReaderPreview({
 }: {
   bookmark: ZBookmark;
 }) {
-  const { colorScheme } = useColorScheme();
+  const { isDarkColorScheme: isDark } = useColorScheme();
 
   const {
     data: bookmarkWithContent,
@@ -60,8 +61,6 @@ export function BookmarkLinkReaderPreview({
     throw new Error("Wrong content type rendered");
   }
 
-  const isDark = colorScheme === "dark";
-
   return (
     <View className="flex-1 bg-background">
       <WebView
diff --git a/apps/mobile/components/bookmarks/BookmarkList.tsx b/apps/mobile/components/bookmarks/BookmarkList.tsx
index 7be63ed6..adcf12e0 100644
--- a/apps/mobile/components/bookmarks/BookmarkList.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkList.tsx
@@ -1,6 +1,7 @@
 import { useRef } from "react";
-import { ActivityIndicator, Keyboard, Text, View } from "react-native";
+import { ActivityIndicator, Keyboard, View } from "react-native";
 import Animated, { LinearTransition } from "react-native-reanimated";
+import { Text } from "@/components/ui/Text";
 import { useScrollToTop } from "@react-navigation/native";
 
 import type { ZBookmark } from "@karakeep/shared/types/bookmarks";
@@ -38,7 +39,7 @@ export default function BookmarkList({
       renderItem={(b) => <BookmarkCard bookmark={b.item} />}
       ListEmptyComponent={
         <View className="items-center justify-center pt-4">
-          <Text className="text-xl text-foreground">No Bookmarks</Text>
+          <Text variant="title3">No Bookmarks</Text>
         </View>
       }
       data={bookmarks}
diff --git a/apps/mobile/components/bookmarks/PDFViewer.tsx b/apps/mobile/components/bookmarks/PDFViewer.tsx
index 24b9edfb..c6412431 100644
--- a/apps/mobile/components/bookmarks/PDFViewer.tsx
+++ b/apps/mobile/components/bookmarks/PDFViewer.tsx
@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
 import ReactNativeBlobUtil from "react-native-blob-util";
 import Pdf from "react-native-pdf";
+import { Text } from "@/components/ui/Text";
 import { useQuery } from "@tanstack/react-query";
 import { useColorScheme } from "nativewind";
 
diff --git a/apps/mobile/components/bookmarks/TagPill.tsx b/apps/mobile/components/bookmarks/TagPill.tsx
index eb9945e5..caf0f636 100644
--- a/apps/mobile/components/bookmarks/TagPill.tsx
+++ b/apps/mobile/components/bookmarks/TagPill.tsx
@@ -7,7 +7,7 @@ export default function TagPill({ tag }: { tag: ZBookmarkTags }) {
   return (
     <View
       key={tag.id}
-      className="rounded-full border border-accent px-2.5 py-0.5 text-xs font-semibold"
+      className="rounded-full border border-input px-2.5 py-0.5 text-xs font-semibold"
     >
       <Link className="text-foreground" href={`dashboard/tags/${tag.id}`}>
         {tag.name}