mobile: Add dark mode support

1 files changed, 15 insertions, 6 deletions

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>
   ),