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, 58 insertions, 0 deletions

diff --git a/apps/mobile/lib/useColorScheme.tsx b/apps/mobile/lib/useColorScheme.tsx
new file mode 100644
index 00000000..a00a445d
--- /dev/null
+++ b/apps/mobile/lib/useColorScheme.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Platform } from "react-native";
+import * as NavigationBar from "expo-navigation-bar";
+import useAppSettings from "@/lib/settings";
+import { COLORS } from "@/theme/colors";
+import { useColorScheme as useNativewindColorScheme } from "nativewind";
+
+function useColorScheme() {
+  const { settings, isLoading } = useAppSettings();
+  const { colorScheme, setColorScheme: setNativewindColorScheme } =
+    useNativewindColorScheme();
+
+  // Sync user settings with native color scheme
+  React.useEffect(() => {
+    setNativewindColorScheme(settings.theme);
+  }, [settings.theme, isLoading]);
+
+  React.useEffect(() => {
+    if (Platform.OS === "android") {
+      setNavigationBar(colorScheme ?? "light").catch((error) => {
+        console.error('useColorScheme.tsx", "setColorScheme', error);
+      });
+    }
+  }, [colorScheme]);
+
+  return {
+    colorScheme: colorScheme ?? "light",
+    isDarkColorScheme: colorScheme === "dark",
+    colors: COLORS[colorScheme ?? "light"],
+  };
+}
+
+/**
+ * Set the Android navigation bar color based on the color scheme.
+ */
+function useInitialAndroidBarSync() {
+  const { colorScheme } = useColorScheme();
+  React.useEffect(() => {
+    if (Platform.OS !== "android") return;
+    setNavigationBar(colorScheme).catch((error) => {
+      console.error('useColorScheme.tsx", "useInitialColorScheme', error);
+    });
+  }, []);
+}
+
+export { useColorScheme, useInitialAndroidBarSync };
+
+function setNavigationBar(colorScheme: "light" | "dark") {
+  return Promise.all([
+    NavigationBar.setButtonStyleAsync(
+      colorScheme === "dark" ? "light" : "dark",
+    ),
+    NavigationBar.setPositionAsync("absolute"),
+    NavigationBar.setBackgroundColorAsync(
+      colorScheme === "dark" ? "#00000030" : "#ffffff80",
+    ),
+  ]);
+}