mobile: Add dark mode support

4 files changed, 20 insertions, 12 deletions

diff --git a/apps/mobile/components/ui/Divider.tsx b/apps/mobile/components/ui/Divider.tsx
index cf1b4624..fbc5cf64 100644
--- a/apps/mobile/components/ui/Divider.tsx
+++ b/apps/mobile/components/ui/Divider.tsx
@@ -2,7 +2,6 @@ import { View } from "react-native";
 import { cn } from "@/lib/utils";
 
 function Divider({
-  color = "#DFE4EA",
   className,
   orientation,
   ...props
@@ -10,15 +9,13 @@ function Divider({
   color?: string;
   orientation: "horizontal" | "vertical";
 } & React.ComponentPropsWithoutRef<typeof View>) {
-  const dividerStyles = [{ backgroundColor: color }];
-
   return (
     <View
       className={cn(
+        "bg-accent",
         orientation === "horizontal" ? "h-0.5" : "w-0.5",
         className,
       )}
-      style={dividerStyles}
       {...props}
     />
   );
diff --git a/apps/mobile/components/ui/FullPageSpinner.tsx b/apps/mobile/components/ui/FullPageSpinner.tsx
index 89b66090..5436937a 100644
--- a/apps/mobile/components/ui/FullPageSpinner.tsx
+++ b/apps/mobile/components/ui/FullPageSpinner.tsx
@@ -2,7 +2,7 @@ import { ActivityIndicator, View } from "react-native";
 
 export default function FullPageSpinner() {
   return (
-    <View className="h-full w-full items-center justify-center">
+    <View className="h-full w-full items-center justify-center bg-gray-100 dark:bg-background">
       <ActivityIndicator />
     </View>
   );
diff --git a/apps/mobile/components/ui/Input.tsx b/apps/mobile/components/ui/Input.tsx
index 01c9fb2f..57d16f5d 100644
--- a/apps/mobile/components/ui/Input.tsx
+++ b/apps/mobile/components/ui/Input.tsx
@@ -2,6 +2,8 @@ import { forwardRef } from "react";
 import { Text, TextInput, View } from "react-native";
 import { cn } from "@/lib/utils";
 
+import { TailwindResolver } from "../TailwindResolver";
+
 export interface InputProps
   extends React.ComponentPropsWithoutRef<typeof TextInput> {
   label?: string;
@@ -13,13 +15,20 @@ const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
   ({ className, label, labelClasses, inputClasses, ...props }, ref) => (
     <View className={cn("flex flex-col gap-1.5", className)}>
       {label && <Text className={cn("text-base", labelClasses)}>{label}</Text>}
-      <TextInput
-        ref={ref}
-        className={cn(
-          inputClasses,
-          "rounded-lg border border-input px-4 py-2.5",
+      <TailwindResolver
+        className="text-gray-400"
+        comp={(styles) => (
+          <TextInput
+            placeholderTextColor={styles?.color?.toString()}
+            ref={ref}
+            className={cn(
+              "bg-background text-foreground",
+              inputClasses,
+              "rounded-lg border border-input px-4 py-2.5",
+            )}
+            {...props}
+          />
         )}
-        {...props}
       />
     </View>
   ),
diff --git a/apps/mobile/components/ui/PageTitle.tsx b/apps/mobile/components/ui/PageTitle.tsx
index 57b19e7d..1c1543ce 100644
--- a/apps/mobile/components/ui/PageTitle.tsx
+++ b/apps/mobile/components/ui/PageTitle.tsx
@@ -1,5 +1,7 @@
 import { Text } from "react-native";
 
 export default function PageTitle({ title }: { title: string }) {
-  return <Text className="p-4 text-4xl font-bold">{title}</Text>;
+  return (
+    <Text className="p-4 text-4xl font-bold text-foreground">{title}</Text>
+  );
 }