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

1 files changed, 66 insertions, 0 deletions

diff --git a/apps/mobile/tailwind.config.js b/apps/mobile/tailwind.config.js
new file mode 100644
index 00000000..74a9f30a
--- /dev/null
+++ b/apps/mobile/tailwind.config.js
@@ -0,0 +1,66 @@
+const { hairlineWidth, platformSelect } = require("nativewind/theme");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: Update this to include the paths to all of your component files.
+  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      colors: {
+        border: withOpacity("border"),
+        input: withOpacity("input"),
+        ring: withOpacity("ring"),
+        background: withOpacity("background"),
+        foreground: withOpacity("foreground"),
+        primary: {
+          DEFAULT: withOpacity("primary"),
+          foreground: withOpacity("primary-foreground"),
+        },
+        secondary: {
+          DEFAULT: withOpacity("secondary"),
+          foreground: withOpacity("secondary-foreground"),
+        },
+        destructive: {
+          DEFAULT: withOpacity("destructive"),
+          foreground: withOpacity("destructive-foreground"),
+        },
+        muted: {
+          DEFAULT: withOpacity("muted"),
+          foreground: withOpacity("muted-foreground"),
+        },
+        accent: {
+          DEFAULT: withOpacity("accent"),
+          foreground: withOpacity("accent-foreground"),
+        },
+        popover: {
+          DEFAULT: withOpacity("popover"),
+          foreground: withOpacity("popover-foreground"),
+        },
+        card: {
+          DEFAULT: withOpacity("card"),
+          foreground: withOpacity("card-foreground"),
+        },
+      },
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+    },
+  },
+  plugins: [],
+};
+
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) {
+      return platformSelect({
+        ios: `rgb(var(--${variableName}) / ${opacityValue})`,
+        android: `rgb(var(--android-${variableName}) / ${opacityValue})`,
+      });
+    }
+    return platformSelect({
+      ios: `rgb(var(--${variableName}))`,
+      android: `rgb(var(--android-${variableName}))`,
+    });
+  };
+}