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

2 files changed, 139 insertions, 0 deletions

diff --git a/apps/mobile/theme/colors.ts b/apps/mobile/theme/colors.ts
new file mode 100644
index 00000000..626bcb99
--- /dev/null
+++ b/apps/mobile/theme/colors.ts
@@ -0,0 +1,109 @@
+import { Platform } from "react-native";
+
+const IOS_SYSTEM_COLORS = {
+  white: "rgb(255, 255, 255)",
+  black: "rgb(0, 0, 0)",
+  light: {
+    grey6: "rgb(242, 242, 247)",
+    grey5: "rgb(230, 230, 235)",
+    grey4: "rgb(210, 210, 215)",
+    grey3: "rgb(199, 199, 204)",
+    grey2: "rgb(176, 176, 181)",
+    grey: "rgb(153, 153, 158)",
+    background: "rgb(242, 242, 247)",
+    foreground: "rgb(0, 0, 0)",
+    root: "rgb(242, 242, 247)",
+    card: "rgb(242, 242, 247)",
+    destructive: "rgb(255, 56, 43)",
+    primary: "rgb(0, 123, 255)",
+  },
+  dark: {
+    grey6: "rgb(21, 21, 24)",
+    grey5: "rgb(40, 40, 40)",
+    grey4: "rgb(51, 51, 51)",
+    grey3: "rgb(70, 70, 70)",
+    grey2: "rgb(99, 99, 99)",
+    grey: "rgb(158, 158, 158)",
+    background: "rgb(0, 0, 0)",
+    foreground: "rgb(255, 255, 255)",
+    root: "rgb(0, 0, 0)",
+    card: "rgb(0, 0, 0)",
+    destructive: "rgb(254, 67, 54)",
+    primary: "rgb(3, 133, 255)",
+  },
+} as const;
+
+const ANDROID_COLORS = {
+  white: "rgb(255, 255, 255)",
+  black: "rgb(0, 0, 0)",
+  light: {
+    grey6: "rgb(242, 242, 247)",
+    grey5: "rgb(230, 230, 235)",
+    grey4: "rgb(210, 210, 215)",
+    grey3: "rgb(199, 199, 204)",
+    grey2: "rgb(176, 176, 181)",
+    grey: "rgb(153, 153, 158)",
+    background: "rgb(250, 252, 255)",
+    foreground: "rgb(27, 28, 29)",
+    root: "rgb(250, 252, 255)",
+    card: "rgb(250, 252, 255)",
+    destructive: "rgb(186, 26, 26)",
+    primary: "rgb(0, 112, 233)",
+  },
+  dark: {
+    grey6: "rgb(21, 21, 24)",
+    grey5: "rgb(40, 40, 40)",
+    grey4: "rgb(51, 51, 51)",
+    grey3: "rgb(70, 70, 70)",
+    grey2: "rgb(99, 99, 99)",
+    grey: "rgb(158, 158, 158)",
+    background: "rgb(24, 28, 32)",
+    foreground: "rgb(221, 227, 233)",
+    root: "rgb(24, 28, 32)",
+    card: "rgb(24, 28, 32)",
+    destructive: "rgb(147, 0, 10)",
+    primary: "rgb(0, 69, 148)",
+  },
+} as const;
+
+const WEB_COLORS = {
+  white: "rgb(255, 255, 255)",
+  black: "rgb(0, 0, 0)",
+  light: {
+    grey6: "rgb(250, 252, 255)",
+    grey5: "rgb(243, 247, 251)",
+    grey4: "rgb(236, 242, 248)",
+    grey3: "rgb(233, 239, 247)",
+    grey2: "rgb(229, 237, 245)",
+    grey: "rgb(226, 234, 243)",
+    background: "rgb(250, 252, 255)",
+    foreground: "rgb(27, 28, 29)",
+    root: "rgb(250, 252, 255)",
+    card: "rgb(250, 252, 255)",
+    destructive: "rgb(186, 26, 26)",
+    primary: "rgb(0, 112, 233)",
+  },
+  dark: {
+    grey6: "rgb(25, 30, 36)",
+    grey5: "rgb(31, 38, 45)",
+    grey4: "rgb(35, 43, 52)",
+    grey3: "rgb(38, 48, 59)",
+    grey2: "rgb(40, 51, 62)",
+    grey: "rgb(44, 56, 68)",
+    background: "rgb(24, 28, 32)",
+    foreground: "rgb(221, 227, 233)",
+    root: "rgb(24, 28, 32)",
+    card: "rgb(24, 28, 32)",
+    destructive: "rgb(147, 0, 10)",
+    primary: "rgb(0, 69, 148)",
+  },
+} as const;
+
+const COLORS =
+  Platform.OS === "ios"
+    ? IOS_SYSTEM_COLORS
+    : Platform.OS === "android"
+      ? ANDROID_COLORS
+      : WEB_COLORS;
+
+export { COLORS };
diff --git a/apps/mobile/theme/index.ts b/apps/mobile/theme/index.ts
new file mode 100644
index 00000000..05b42bf7
--- /dev/null
+++ b/apps/mobile/theme/index.ts
@@ -0,0 +1,30 @@
+import { DarkTheme, DefaultTheme } from "@react-navigation/native";
+
+import { COLORS } from "./colors";
+
+const NAV_THEME = {
+  light: {
+    ...DefaultTheme,
+    colors: {
+      background: COLORS.light.background,
+      border: COLORS.light.grey5,
+      card: COLORS.light.card,
+      notification: COLORS.light.destructive,
+      primary: COLORS.light.primary,
+      text: COLORS.black,
+    },
+  },
+  dark: {
+    ...DarkTheme,
+    colors: {
+      background: COLORS.dark.background,
+      border: COLORS.dark.grey5,
+      card: COLORS.dark.grey6,
+      notification: COLORS.dark.destructive,
+      primary: COLORS.dark.primary,
+      text: COLORS.white,
+    },
+  },
+};
+
+export { NAV_THEME };