diff --git a/apps/mobile/.claude/ui-components.md b/apps/mobile/.claude/ui-components.md
index 65e4e3e8..4871cb1b 100644
--- a/apps/mobile/.claude/ui-components.md
+++ b/apps/mobile/.claude/ui-components.md
@@ -106,13 +106,49 @@ const StyledComponent = withUniwind(SomeComponent);
 
 ---
 
-## 테마 색상 사용
+## 테마 색상 사용 (다크/라이트 모드)
+
+### 필수: CSS 변수(Tailwind 클래스)만 사용
+
+다크/라이트 모드가 제대로 작동하려면 **반드시** `global.css`에 정의된 CSS 변수를 사용해야 합니다.
+
+**하드코딩된 색상은 테마가 변경되어도 바뀌지 않습니다!**
+
+```tsx
+// ❌ 금지 - 다크 모드에서 안 바뀜
+backgroundColor: '#F5F5F5'
+backgroundColor: 'white'
+color: '#9CA3AF'
+tabBarInactiveTintColor: '#8E8E93'
+
+// ✅ 올바름 - 다크 모드에서 자동 변환
+className="bg-gray-3"
+className="bg-white"
+className="text-gray-5"
+```
+
+### 사용 가능한 색상 변수
+
+| 변수 | 용도 |
+|------|------|
+| `bg-white` | 카드, 섹션 배경 (다크 모드에서 #121212) |
+| `bg-gray-1` ~ `bg-gray-10` | 배경색 계열 |
+| `text-gray-1` ~ `text-gray-10` | 텍스트 색상 계열 |
+| `bg-main`, `text-main` | 메인 브랜드 색상 |
+| `bg-error`, `text-error` | 에러 색상 |
+| `bg-success`, `text-success` | 성공 색상 |
+| `bg-warning`, `text-warning` | 경고 색상 |
+| `bg-background` | 전체 화면 배경 |
+| `bg-surface` | 컴포넌트 표면 |
+| `text-foreground` | 기본 텍스트 |
+| `text-muted` | 보조 텍스트 |
 
 ### className으로 색상 적용 (권장)
 
 ```tsx
 <Text className="text-gray-6">텍스트</Text>
 <View className="bg-main" />
+<View className="bg-white rounded-2xl" />  // 다크 모드에서 자동 변환
 ```
 
 ### JS에서 색상값이 필요한 경우: useResolveClassNames
@@ -126,12 +162,14 @@ import { useResolveClassNames } from 'uniwind';
 
 function MyComponent() {
   const activeStyle = useResolveClassNames('text-main');
+  const inactiveStyle = useResolveClassNames('text-gray-6');
   const borderStyle = useResolveClassNames('border-gray-2');
 
   return (
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: activeStyle.color as string,
+        tabBarInactiveTintColor: inactiveStyle.color as string,  // ✅ 하드코딩 금지
         tabBarStyle: { borderTopColor: borderStyle.borderColor as string },
       }}
     />
@@ -165,12 +203,59 @@ export const NewIcon = createStyledIcon(NewIconSvg);
 
 ---
 
+## 애니메이션 상수
+
+React Native Reanimated 애니메이션에서 duration, delay 값은 **반드시** `ANIMATION` 상수를 사용합니다.
+
+```tsx
+import { ANIMATION } from '@src/shared/constants/animation.constants';
+
+// ✅ 올바름
+withTiming(value, { duration: ANIMATION.duration.slow });
+withTiming(value, { duration: ANIMATION.duration.normal });
+withDelay(ANIMATION.delay.short, withTiming(...));
+
+// ❌ 금지 - 매직 넘버 하드코딩
+withTiming(value, { duration: 300 });
+withTiming(value, { duration: 200 });
+```
+
+| 상수 | 값 | 용도 |
+|------|-----|------|
+| `ANIMATION.duration.fast` | 150ms | 빠른 전환 |
+| `ANIMATION.duration.normal` | 200ms | 일반 전환 |
+| `ANIMATION.duration.slow` | 300ms | 느린 전환 |
+| `ANIMATION.delay.short` | 50ms | 짧은 지연 |
+| `ANIMATION.delay.medium` | 100ms | 중간 지연 |
+| `ANIMATION.delay.long` | 200ms | 긴 지연 |
+
+---
+
 ## 금지 사항
 
+### 1. 색상 하드코딩 금지 (중요!)
+
+**다크/라이트 모드 지원을 위해 색상은 반드시 Tailwind 클래스를 사용해야 합니다.**
+
+```tsx
+// ❌ 금지 - 다크 모드에서 안 바뀜
+backgroundColor: '#F5F5F5'
+backgroundColor: 'white'
+color: '#9CA3AF'
+style={{ backgroundColor: 'white' }}
+
+// ✅ 올바름
+className="bg-gray-3"
+className="bg-white"
+className="text-gray-5"
+```
+
+### 2. Shared UI 컴포넌트 중복 import 금지
+
 Shared UI에 있는 컴포넌트를 다른 곳에서 가져오면 안 됩니다.
 
 ```tsx
-// 금지 - Shared UI에 Text가 있으므로
+// ❌ 금지 - Shared UI에 Text가 있으므로
 import { Text, View } from 'react-native';
 ```
 
diff --git a/apps/mobile/app/(app)/(tabs)/_layout.tsx b/apps/mobile/app/(app)/(tabs)/_layout.tsx
index 00ebc74b..2640c98a 100644
--- a/apps/mobile/app/(app)/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(app)/(tabs)/_layout.tsx
@@ -39,12 +39,13 @@ function IOSLiquidGlassTabs() {
 
 function AndroidBottomTabs() {
   const activeStyle = useResolveClassNames('text-main');
+  const inactiveStyle = useResolveClassNames('text-gray-6');
 
   return (
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: activeStyle.color as string,
-        tabBarInactiveTintColor: '#8E8E93',
+        tabBarInactiveTintColor: inactiveStyle.color as string,
         headerShown: false,
         animation: 'shift',
       }}
diff --git a/apps/mobile/app/(app)/(tabs)/feed/_layout.tsx b/apps/mobile/app/(app)/(tabs)/feed/_layout.tsx
index d005596e..3bf7df0e 100644
--- a/apps/mobile/app/(app)/(tabs)/feed/_layout.tsx
+++ b/apps/mobile/app/(app)/(tabs)/feed/_layout.tsx
@@ -1,14 +1,18 @@
 import { BellIcon } from '@src/shared/ui/Icon';
 import { Stack } from 'expo-router';
 import { Pressable, View } from 'react-native';
+import { useResolveClassNames } from 'uniwind';
 
 export default function FeedLayout() {
+  const headerBg = useResolveClassNames('bg-white');
+
   return (
     <Stack
       screenOptions={{
         headerShown: true,
         headerShadowVisible: false,
         headerTitle: '',
+        headerStyle: { backgroundColor: headerBg.backgroundColor as string },
         headerRight: () => (
           <View className="justify-center items-center">
             <Pressable onPress={() => console.log('알림')} hitSlop={8} className="p-2">
diff --git a/apps/mobile/app/(app)/(tabs)/home/index.tsx b/apps/mobile/app/(app)/(tabs)/home/index.tsx
index ea38dda3..2c7840b1 100644
--- a/apps/mobile/app/(app)/(tabs)/home/index.tsx
+++ b/apps/mobile/app/(app)/(tabs)/home/index.tsx
@@ -84,7 +84,8 @@ const HomeScreen = () => {
     <>
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={{ flex: 1, backgroundColor: 'white' }}
+        style={{ flex: 1 }}
+        className="bg-white"
         keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : 0}
       >
         <ScrollView
diff --git a/apps/mobile/app/(app)/(tabs)/mypage/index.tsx b/apps/mobile/app/(app)/(tabs)/mypage/index.tsx
index ae55743c..21103c0b 100644
--- a/apps/mobile/app/(app)/(tabs)/mypage/index.tsx
+++ b/apps/mobile/app/(app)/(tabs)/mypage/index.tsx
@@ -61,6 +61,12 @@ const MyPageScreen = () => {
             label="알림 설정"
             onPress={() => router.push('/settings/notifications')}
           />
+          <SettingNavigationItem label="화면 테마" onPress={() => router.push('/settings/theme')} />
+        </SettingNavigationSection>
+
+        <Spacing size={12} />
+
+        <SettingNavigationSection>
           <SettingNavigationItem label="공지사항" onPress={() => console.log('공지사항 클릭')} />
           <SettingNavigationItem
             label="의견 보내기"
@@ -144,7 +150,7 @@ const SettingNavigationItem = ({ label, onPress }: SettingNavigationItemProps) =
     <PressableFeedback.Highlight className="rounded-xl" />
     <ListRow
       contents={<ListRow.Texts type="1RowTypeA" top={label} />}
-      right={<ArrowRightIcon colorClassName="accent-gray-6" />}
+      right={<ArrowRightIcon colorClassName="text-gray-6" />}
       horizontalPadding="medium"
     />
   </PressableFeedback>
diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
index 66ad83e5..d7051723 100644
--- a/apps/mobile/app/(app)/_layout.tsx
+++ b/apps/mobile/app/(app)/_layout.tsx
@@ -1,13 +1,17 @@
 import { Stack } from 'expo-router';
 import { Platform } from 'react-native';
+import { useResolveClassNames } from 'uniwind';
 
 const AppLayout = () => {
+  const { backgroundColor } = useResolveClassNames('bg-white');
+
   return (
     <Stack
       screenOptions={{
         headerShown: false,
         animation: Platform.OS === 'ios' ? 'slide_from_right' : 'slide_from_bottom',
         animationTypeForReplace: 'push',
+        contentStyle: { backgroundColor: backgroundColor as string },
       }}
     >
       <Stack.Screen name="(tabs)" />
diff --git a/apps/mobile/app/(app)/settings/_layout.tsx b/apps/mobile/app/(app)/settings/_layout.tsx
index 32dea786..4e822f98 100644
--- a/apps/mobile/app/(app)/settings/_layout.tsx
+++ b/apps/mobile/app/(app)/settings/_layout.tsx
@@ -14,7 +14,7 @@ export default function SettingsLayout() {
         headerShadowVisible: false,
         headerStyle: { backgroundColor: headerBg.backgroundColor as string },
         headerTitleStyle: {
-          fontSize: 18,
+          fontSize: 16,
           fontWeight: '600',
           color: titleColor.color as string,
         },
@@ -29,6 +29,7 @@ export default function SettingsLayout() {
       }}
     >
       <Stack.Screen name="notifications" options={{ title: '알림 설정' }} />
+      <Stack.Screen name="theme" options={{ title: '화면 테마' }} />
       <Stack.Screen name="terms" options={{ title: '약관 및 정책' }} />
     </Stack>
   );
diff --git a/apps/mobile/app/(app)/settings/theme.tsx b/apps/mobile/app/(app)/settings/theme.tsx
new file mode 100644
index 00000000..528422eb
--- /dev/null
+++ b/apps/mobile/app/(app)/settings/theme.tsx
@@ -0,0 +1,86 @@
+import { ANIMATION } from '@src/shared/constants/animation.constants';
+import { type ThemeMode, useTheme } from '@src/shared/providers/theme-provider';
+import { DeviceIcon, MoonIcon, type StyledIconType, SunIcon } from '@src/shared/ui/Icon';
+import { ListRow } from '@src/shared/ui/ListRow/ListRow';
+import { StyledSafeAreaView } from '@src/shared/ui/SafeAreaView/SafeAreaView';
+import { RadioGroup } from 'heroui-native';
+import { ScrollView } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, withTiming } from 'react-native-reanimated';
+
+const ThemeSettingsScreen = () => {
+  const { mode, setMode } = useTheme();
+
+  return (
+    <StyledSafeAreaView className="flex-1 bg-gray-1" edges={['bottom']}>
+      <ScrollView className="px-4 flex-1">
+        <RadioGroup
+          value={mode}
+          onValueChange={(value) => setMode(value as ThemeMode)}
+          className="bg-white rounded-2xl overflow-hidden gap-0"
+        >
+          <ThemeRadioItem value="light" label="라이트 모드" Icon={SunIcon} />
+          <ThemeRadioItem value="dark" label="다크 모드" Icon={MoonIcon} />
+          <ThemeRadioItem value="system" label="시스템 설정" Icon={DeviceIcon} />
+        </RadioGroup>
+      </ScrollView>
+    </StyledSafeAreaView>
+  );
+};
+
+export default ThemeSettingsScreen;
+
+interface ThemeRadioItemProps {
+  value: ThemeMode;
+  label: string;
+  Icon: StyledIconType;
+}
+
+function ThemeRadioItem({ value, label, Icon }: ThemeRadioItemProps) {
+  return (
+    <RadioGroup.Item value={value}>
+      {({ isSelected }) => (
+        <ListRow
+          contents={
+            <ListRow.Texts
+              type="1RowTypeA"
+              top={label}
+              topProps={{ size: 'b3', weight: 'semibold' }}
+            />
+          }
+          right={
+            <RadioGroup.Indicator>
+              <AnimatedThumbIcon Icon={Icon} isSelected={isSelected} />
+            </RadioGroup.Indicator>
+          }
+          horizontalPadding="medium"
+          verticalPadding="large"
+        />
+      )}
+    </RadioGroup.Item>
+  );
+}
+
+interface AnimatedThumbIconProps {
+  Icon: StyledIconType;
+  isSelected: boolean;
+}
+
+function AnimatedThumbIcon({ Icon, isSelected }: AnimatedThumbIconProps) {
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {
+        scale: withTiming(isSelected ? 1 : 1.8, {
+          duration: ANIMATION.duration.slow,
+          easing: Easing.out(Easing.ease),
+        }),
+      },
+    ],
+    opacity: withTiming(isSelected ? 1 : 0, { duration: ANIMATION.duration.normal }),
+  }));
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Icon colorClassName="text-white" width={14} height={14} />
+    </Animated.View>
+  );
+}
diff --git a/apps/mobile/app/(auth)/_layout.tsx b/apps/mobile/app/(auth)/_layout.tsx
index ff585ffb..b1167721 100644
--- a/apps/mobile/app/(auth)/_layout.tsx
+++ b/apps/mobile/app/(auth)/_layout.tsx
@@ -1,18 +1,40 @@
-import { Stack } from 'expo-router';
-import { Platform } from 'react-native';
+import { ArrowLeftIcon } from '@src/shared/ui/Icon';
+import { router, Stack } from 'expo-router';
+import { Platform, Pressable, View } from 'react-native';
+import { useResolveClassNames } from 'uniwind';
 
 const AuthLayout = () => {
+  const { backgroundColor } = useResolveClassNames('bg-white');
+  const headerBg = useResolveClassNames('bg-background');
+  const titleColor = useResolveClassNames('text-gray-9');
+
   return (
     <Stack
       screenOptions={{
         headerShown: false,
         animation: Platform.OS === 'ios' ? 'default' : 'fade_from_bottom',
         animationDuration: 200,
+        contentStyle: { backgroundColor: backgroundColor as string },
+        headerShadowVisible: false,
+        headerStyle: { backgroundColor: headerBg.backgroundColor as string },
+        headerTitleStyle: {
+          fontSize: 16,
+          fontWeight: '600',
+          color: titleColor.color as string,
+        },
+        headerTitleAlign: 'center',
+        headerLeft: () => (
+          <View className="justify-center items-center">
+            <Pressable onPress={() => router.back()} hitSlop={8} className="p-2">
+              <ArrowLeftIcon width={20} height={20} colorClassName="text-gray-9" />
+            </Pressable>
+          </View>
+        ),
       }}
     >
       <Stack.Screen name="login" />
       <Stack.Screen name="email-login" />
-      <Stack.Screen name="sign-up" />
+      <Stack.Screen name="sign-up" options={{ headerShown: true }} />
       <Stack.Screen name="verify-email" />
     </Stack>
   );
diff --git a/apps/mobile/app/(auth)/login.tsx b/apps/mobile/app/(auth)/login.tsx
index aadd5436..577e3a35 100644
--- a/apps/mobile/app/(auth)/login.tsx
+++ b/apps/mobile/app/(auth)/login.tsx
@@ -87,6 +87,7 @@ const LoginScreen = () => {
               onPress={handleKakaoLogin}
               isLoading={kakaoLoginMutation.isPending || exchangeCodeMutation.isPending}
               className="bg-kakao"
+              labelClassName="dark:text-gray-1"
             />
 
             <SocialLoginButton
@@ -94,7 +95,8 @@ const LoginScreen = () => {
               label="Google로 계속하기"
               onPress={handleGoogleLogin}
               isLoading={googleLoginMutation.isPending || exchangeCodeMutation.isPending}
-              className="bg-white border border-gray-200"
+              className="bg-white border border-gray-2 dark:border-gray-2 dark:bg-gray-2"
+              labelClassName="dark:text-gray-9"
             />
           </VStack>
 
@@ -112,7 +114,7 @@ const LoginScreen = () => {
                 icon={<AppleIcon width={20} height={20} />}
                 onPress={handleAppleLogin}
                 isLoading={appleLoginMutation.isPending}
-                className="bg-black"
+                className="bg-black dark:border dark:border-gray-2"
               />
             )}
             <SocialLoginIconButton
@@ -149,14 +151,21 @@ type ButtonProps = ComponentProps<typeof Button>;
 interface SocialLoginButtonProps extends Omit<ButtonProps, 'children'> {
   icon: ReactNode;
   label: string;
+  labelClassName?: string;
 }
 
-const SocialLoginButton = ({ icon, label, className, ...props }: SocialLoginButtonProps) => {
+const SocialLoginButton = ({
+  icon,
+  label,
+  className,
+  labelClassName,
+  ...props
+}: SocialLoginButtonProps) => {
   return (
     <Button {...props} className={className}>
       <HStack align="center" gap={8}>
         {icon}
-        <Text size="b4" weight="semibold" shade={9}>
+        <Text size="b4" weight="semibold" shade={9} className={labelClassName}>
           {label}
         </Text>
       </HStack>
diff --git a/apps/mobile/app/(auth)/sign-up.tsx b/apps/mobile/app/(auth)/sign-up.tsx
index 77bd361f..1a49a7d2 100644
--- a/apps/mobile/app/(auth)/sign-up.tsx
+++ b/apps/mobile/app/(auth)/sign-up.tsx
@@ -7,12 +7,7 @@ import {
   signUpFormSchema,
 } from '@src/features/auth/presentations/schemas/sign-up-form.schema';
 import { useStepper } from '@src/shared/hooks/useStepper';
-import { HStack } from '@src/shared/ui/HStack/HStack';
-import { ArrowLeftIcon } from '@src/shared/ui/Icon';
-import { StyledSafeAreaView } from '@src/shared/ui/SafeAreaView/SafeAreaView';
-import { Text } from '@src/shared/ui/Text/Text';
-import { router } from 'expo-router';
-import { PressableFeedback } from 'heroui-native';
+import { Stack } from 'expo-router';
 import { FormProvider, useForm } from 'react-hook-form';
 import { View } from 'react-native';
 import { match } from 'ts-pattern';
@@ -41,16 +36,8 @@ const SignUpScreen = () => {
   });
 
   return (
-    <StyledSafeAreaView className="flex-1 bg-white" edges={['top']}>
-      <HStack align="center" px={16} py={12}>
-        <PressableFeedback onPress={() => router.back()}>
-          <ArrowLeftIcon width={24} height={24} colorClassName="text-gray-8" />
-        </PressableFeedback>
-        <Text size="b2" weight="semibold" align="center" className="flex-1">
-          {SIGN_UP_STEP_TITLES[step]}
-        </Text>
-        <View className="w-6" />
-      </HStack>
+    <View className="flex-1 bg-background">
+      <Stack.Screen options={{ title: SIGN_UP_STEP_TITLES[step] }} />
 
       <FormProvider {...form}>
         {match(step)
@@ -63,7 +50,7 @@ const SignUpScreen = () => {
           .with('이메일_인증', () => <SignUpVerificationForm />)
           .exhaustive()}
       </FormProvider>
-    </StyledSafeAreaView>
+    </View>
   );
 };
 
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 9f240eb9..eb5cb476 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -4,19 +4,21 @@ import { GestureHandlerProvider } from '@src/bootstrap/providers/gesture-handler
 import { HeroUIProvider } from '@src/bootstrap/providers/hero-ui-provider';
 import { NotificationProvider } from '@src/bootstrap/providers/notification-provider';
 import { QueryProvider } from '@src/bootstrap/providers/query-provider';
+import { ThemeProvider } from '@src/shared/providers/theme-provider';
 import { useFonts } from 'expo-font';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import { useEffect } from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import { KeyboardProvider } from 'react-native-keyboard-controller';
+import { useResolveClassNames } from 'uniwind';
 import '../global.css';
 
 SplashScreen.preventAutoHideAsync();
 
 const FullScreenLoader = () => {
   return (
-    <View className="flex-1 items-center justify-center bg-white">
+    <View className="flex-1 items-center justify-center bg-background">
       <ActivityIndicator size="large" />
     </View>
   );
@@ -24,6 +26,7 @@ const FullScreenLoader = () => {
 
 const AuthGateLayout = () => {
   const { status } = useAuth();
+  const { backgroundColor } = useResolveClassNames('bg-white');
   const isAuthenticated = status === 'authenticated';
 
   if (status === 'loading') {
@@ -37,6 +40,7 @@ const AuthGateLayout = () => {
         animation: 'fade',
         animationDuration: 250,
         animationTypeForReplace: 'pop',
+        contentStyle: { backgroundColor: backgroundColor as string },
       }}
     >
       <Stack.Protected guard={isAuthenticated}>
@@ -74,15 +78,17 @@ const AppBootstrapLayout = () => {
     <GestureHandlerProvider>
       <KeyboardProvider>
         <HeroUIProvider>
-          <QueryProvider>
-            <DIProvider>
-              <AuthProvider>
-                <NotificationProvider>
-                  <AuthGateLayout />
-                </NotificationProvider>
-              </AuthProvider>
-            </DIProvider>
-          </QueryProvider>
+          <ThemeProvider>
+            <QueryProvider>
+              <DIProvider>
+                <AuthProvider>
+                  <NotificationProvider>
+                    <AuthGateLayout />
+                  </NotificationProvider>
+                </AuthProvider>
+              </DIProvider>
+            </QueryProvider>
+          </ThemeProvider>
         </HeroUIProvider>
       </KeyboardProvider>
     </GestureHandlerProvider>
diff --git a/apps/mobile/assets/icons/ic_device.svg b/apps/mobile/assets/icons/ic_device.svg
new file mode 100644
index 00000000..a365c441
--- /dev/null
+++ b/apps/mobile/assets/icons/ic_device.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 2.25C6.25736 2.25 5.25 3.25736 5.25 4.5V19.5C5.25 20.7426 6.25736 21.75 7.5 21.75H16.5C17.7426 21.75 18.75 20.7426 18.75 19.5V4.5C18.75 3.25736 17.7426 2.25 16.5 2.25H7.5ZM6.75 4.5C6.75 4.08579 7.08579 3.75 7.5 3.75H16.5C16.9142 3.75 17.25 4.08579 17.25 4.5V19.5C17.25 19.9142 16.9142 20.25 16.5 20.25H7.5C7.08579 20.25 6.75 19.9142 6.75 19.5V4.5ZM10.5 18C10.5 17.1716 11.1716 16.5 12 16.5C12.8284 16.5 13.5 17.1716 13.5 18C13.5 18.8284 12.8284 19.5 12 19.5C11.1716 19.5 10.5 18.8284 10.5 18Z" fill="currentColor"/>
+</svg>
diff --git a/apps/mobile/assets/icons/ic_moon.svg b/apps/mobile/assets/icons/ic_moon.svg
new file mode 100644
index 00000000..d08f93f6
--- /dev/null
+++ b/apps/mobile/assets/icons/ic_moon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.7519 15.0019C20.597 15.484 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 6.00001C8.25 4.67045 8.51601 3.40301 8.99808 2.24811C5.47078 3.71155 3 7.21091 3 11.25C3 16.6348 7.36522 21 12.75 21C16.7891 21 20.2885 18.5293 21.7519 15.0019Z" fill="currentColor"/>
+</svg>
diff --git a/apps/mobile/assets/icons/ic_sun.svg b/apps/mobile/assets/icons/ic_sun.svg
new file mode 100644
index 00000000..3322f784
--- /dev/null
+++ b/apps/mobile/assets/icons/ic_sun.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1.5C12.4142 1.5 12.75 1.83579 12.75 2.25V3.75C12.75 4.16421 12.4142 4.5 12 4.5C11.5858 4.5 11.25 4.16421 11.25 3.75V2.25C11.25 1.83579 11.5858 1.5 12 1.5ZM12 7.5C9.51472 7.5 7.5 9.51472 7.5 12C7.5 14.4853 9.51472 16.5 12 16.5C14.4853 16.5 16.5 14.4853 16.5 12C16.5 9.51472 14.4853 7.5 12 7.5ZM12 19.5C12.4142 19.5 12.75 19.8358 12.75 20.25V21.75C12.75 22.1642 12.4142 22.5 12 22.5C11.5858 22.5 11.25 22.1642 11.25 21.75V20.25C11.25 19.8358 11.5858 19.5 12 19.5ZM19.5 12C19.5 11.5858 19.8358 11.25 20.25 11.25H21.75C22.1642 11.25 22.5 11.5858 22.5 12C22.5 12.4142 22.1642 12.75 21.75 12.75H20.25C19.8358 12.75 19.5 12.4142 19.5 12ZM1.5 12C1.5 11.5858 1.83579 11.25 2.25 11.25H3.75C4.16421 11.25 4.5 11.5858 4.5 12C4.5 12.4142 4.16421 12.75 3.75 12.75H2.25C1.83579 12.75 1.5 12.4142 1.5 12ZM17.3033 6.6967C17.0104 6.40381 17.0104 5.92893 17.3033 5.63604L18.3639 4.57538C18.6568 4.28249 19.1317 4.28249 19.4246 4.57538C19.7175 4.86828 19.7175 5.34315 19.4246 5.63604L18.364 6.6967C18.0711 6.98959 17.5962 6.98959 17.3033 6.6967ZM4.57538 19.4246C4.28249 19.1317 4.28249 18.6568 4.57538 18.3639L5.63604 17.3033C5.92893 17.0104 6.40381 17.0104 6.6967 17.3033C6.98959 17.5962 6.98959 18.0711 6.6967 18.364L5.63604 19.4246C5.34315 19.7175 4.86828 19.7175 4.57538 19.4246ZM17.3033 17.3033C17.5962 17.0104 18.0711 17.0104 18.364 17.3033L19.4246 18.3639C19.7175 18.6568 19.7175 19.1317 19.4246 19.4246C19.1317 19.7175 18.6568 19.7175 18.3639 19.4246L17.3033 18.364C17.0104 18.0711 17.0104 17.5962 17.3033 17.3033ZM6.6967 6.6967C6.40381 6.98959 5.92893 6.98959 5.63604 6.6967L4.57538 5.63604C4.28249 5.34315 4.28249 4.86828 4.57538 4.57538C4.86828 4.28249 5.34315 4.28249 5.63604 4.57538L6.6967 5.63604C6.98959 5.92893 6.98959 6.40381 6.6967 6.6967Z" fill="currentColor"/>
+</svg>
diff --git a/apps/mobile/global.css b/apps/mobile/global.css
index ad2893c3..ee3ee3fb 100644
--- a/apps/mobile/global.css
+++ b/apps/mobile/global.css
@@ -3,6 +3,7 @@
 @import "heroui-native/styles";
 
 @source "./node_modules/heroui-native/lib";
+@source "./src/shared/ui/**/*.variants.ts";
 
 @layer theme {
   @variant light {
@@ -15,6 +16,7 @@
     --danger: oklch(0.6 0.22 25);
     --warning: oklch(0.87 0.17 85);
     --divider: oklch(0.9 0 0);
+    --white: oklch(1 0 0);
 
     --gray-1: oklch(0.98 0 0);
     --gray-2: oklch(0.97 0 0);
@@ -44,6 +46,7 @@
     --danger: oklch(0.6 0.22 25);
     --warning: oklch(0.87 0.17 85);
     --divider: oklch(0.5 0 0);
+    --white: oklch(0.14 0 0);
 
     --gray-1: oklch(0.2 0.005 285);
     --gray-2: oklch(0.32 0 0);
@@ -72,6 +75,7 @@
   --color-success: var(--success);
   --color-info: var(--info);
   --color-warning: var(--warning);
+  --color-white: var(--white);
   --color-gray-1: var(--gray-1);
   --color-gray-2: var(--gray-2);
   --color-gray-3: var(--gray-3);
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 2aeeb973..d69a879e 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -89,6 +89,7 @@
     "react-native": "0.81.5",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-keyboard-controller": "^1.20.6",
+    "react-native-mmkv": "3",
     "react-native-modal-datetime-picker": "^18.0.0",
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
diff --git a/apps/mobile/src/features/todo/presentations/components/Calendar/CalendarNavigation.tsx b/apps/mobile/src/features/todo/presentations/components/Calendar/CalendarNavigation.tsx
index 3fb4a694..1b1d8ca8 100644
--- a/apps/mobile/src/features/todo/presentations/components/Calendar/CalendarNavigation.tsx
+++ b/apps/mobile/src/features/todo/presentations/components/Calendar/CalendarNavigation.tsx
@@ -36,10 +36,10 @@ export const CalendarNavigation = ({ viewMode, value, onChange }: CalendarNaviga
   return (
     <HStack gap={4}>
       <PressableFeedback onPress={handlePrevious} className="p-1">
-        <ArrowLeftIcon width={20} height={20} colorClassName="accent-gray-6" />
+        <ArrowLeftIcon width={20} height={20} colorClassName="text-gray-6" />
       </PressableFeedback>
       <PressableFeedback onPress={handleNext} className="p-1">
-        <ArrowRightIcon width={20} height={20} colorClassName="accent-gray-6" />
+        <ArrowRightIcon width={20} height={20} colorClassName="text-gray-6" />
       </PressableFeedback>
     </HStack>
   );
diff --git a/apps/mobile/src/shared/infra/storage/mmkv-storage.ts b/apps/mobile/src/shared/infra/storage/mmkv-storage.ts
new file mode 100644
index 00000000..e0ccad8f
--- /dev/null
+++ b/apps/mobile/src/shared/infra/storage/mmkv-storage.ts
@@ -0,0 +1,3 @@
+import { MMKV } from 'react-native-mmkv';
+
+export const mmkvStorage = new MMKV();
diff --git a/apps/mobile/src/shared/providers/theme-provider.tsx b/apps/mobile/src/shared/providers/theme-provider.tsx
new file mode 100644
index 00000000..0305c7ee
--- /dev/null
+++ b/apps/mobile/src/shared/providers/theme-provider.tsx
@@ -0,0 +1,65 @@
+import { mmkvStorage } from '@src/shared/infra/storage/mmkv-storage';
+import {
+  createContext,
+  type PropsWithChildren,
+  use,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { useColorScheme } from 'react-native';
+import { Uniwind } from 'uniwind';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+
+const THEME_STORAGE_KEY = 'aido_theme_mode';
+const VALID_MODES: ThemeMode[] = ['light', 'dark', 'system'];
+
+function readSavedMode(): ThemeMode {
+  const saved = mmkvStorage.getString(THEME_STORAGE_KEY);
+  if (saved && VALID_MODES.includes(saved as ThemeMode)) {
+    return saved as ThemeMode;
+  }
+  return 'system';
+}
+
+interface ThemeContextValue {
+  mode: ThemeMode;
+  resolvedTheme: ResolvedTheme;
+  setMode: (mode: ThemeMode) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  const systemColorScheme = useColorScheme();
+  const [mode, setModeState] = useState<ThemeMode>(readSavedMode);
+
+  const resolvedTheme: ResolvedTheme = mode === 'system' ? (systemColorScheme ?? 'light') : mode;
+
+  useEffect(() => {
+    Uniwind.setTheme(mode);
+  }, [mode]);
+
+  const setMode = useCallback((newMode: ThemeMode) => {
+    setModeState(newMode);
+    mmkvStorage.set(THEME_STORAGE_KEY, newMode);
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ mode, resolvedTheme, setMode }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextValue => {
+  const context = use(ThemeContext);
+
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+
+  return context;
+};
diff --git a/apps/mobile/src/shared/ui/Button/Button.tsx b/apps/mobile/src/shared/ui/Button/Button.tsx
index 087c787e..5b73b76d 100644
--- a/apps/mobile/src/shared/ui/Button/Button.tsx
+++ b/apps/mobile/src/shared/ui/Button/Button.tsx
@@ -1,4 +1,4 @@
-import { clsx } from 'clsx';
+import { cn } from '@src/shared/utils/cn';
 import { PressableFeedback, Spinner } from 'heroui-native';
 import { Text } from '../Text/Text';
 import type { ButtonProps } from './Button.types';
@@ -27,7 +27,11 @@ export function Button({
   const isTextChild = typeof children === 'string';
 
   const textColorMap = {
-    fill: 'text-white',
+    fill: {
+      primary: 'text-white dark:text-gray-9',
+      danger: 'text-white dark:text-gray-9',
+      dark: 'text-white dark:text-gray-9',
+    },
     weak: {
       primary: 'text-main',
       danger: 'text-error',
@@ -35,7 +39,7 @@ export function Button({
     },
   } as const;
 
-  const textColor = variant === 'fill' ? textColorMap.fill : textColorMap.weak[color];
+  const textColor = variant === 'fill' ? textColorMap.fill[color] : textColorMap.weak[color];
 
   const renderContent = () => {
     if (isLoading) {
@@ -54,7 +58,7 @@ export function Button({
   return (
     <PressableFeedback
       isDisabled={disabled}
-      className={clsx(
+      className={cn(
         buttonVariants({ size, variant, color, display, radius, isDisabled: disabled }),
         className,
       )}
diff --git a/apps/mobile/src/shared/ui/Button/Button.variants.ts b/apps/mobile/src/shared/ui/Button/Button.variants.ts
index 93d7997a..6deed571 100644
--- a/apps/mobile/src/shared/ui/Button/Button.variants.ts
+++ b/apps/mobile/src/shared/ui/Button/Button.variants.ts
@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '@src/shared/utils/tv';
 
 export const highlightVariants = tv({
   variants: {
@@ -53,11 +53,11 @@ export const buttonVariants = tv({
     // fill variants
     { variant: 'fill', color: 'primary', className: 'bg-main' },
     { variant: 'fill', color: 'danger', className: 'bg-error' },
-    { variant: 'fill', color: 'dark', className: 'bg-gray-9' },
+    { variant: 'fill', color: 'dark', className: 'bg-gray-9 dark:bg-gray-3' },
     // weak variants
-    { variant: 'weak', color: 'primary', className: 'bg-main/5' },
-    { variant: 'weak', color: 'danger', className: 'bg-error/5' },
-    { variant: 'weak', color: 'dark', className: 'bg-gray-9/5' },
+    { variant: 'weak', color: 'primary', className: 'bg-main/5 dark:bg-main/20' },
+    { variant: 'weak', color: 'danger', className: 'bg-error/5 dark:bg-error/20' },
+    { variant: 'weak', color: 'dark', className: 'bg-gray-9/5 dark:bg-gray-9/20' },
   ],
 
   defaultVariants: {
diff --git a/apps/mobile/src/shared/ui/Flex/Flex.variants.ts b/apps/mobile/src/shared/ui/Flex/Flex.variants.ts
index ac03cef1..469f0513 100644
--- a/apps/mobile/src/shared/ui/Flex/Flex.variants.ts
+++ b/apps/mobile/src/shared/ui/Flex/Flex.variants.ts
@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '@src/shared/utils/tv';
 
 export const flexVariants = tv({
   base: 'flex',
diff --git a/apps/mobile/src/shared/ui/Icon/createStyledIcon.ts b/apps/mobile/src/shared/ui/Icon/createStyledIcon.ts
index 6e1cf6aa..87898e3f 100644
--- a/apps/mobile/src/shared/ui/Icon/createStyledIcon.ts
+++ b/apps/mobile/src/shared/ui/Icon/createStyledIcon.ts
@@ -7,7 +7,7 @@ import { withUniwind } from 'uniwind';
  *
  * @example
  * const StyledArrowIcon = createStyledIcon(ArrowRightIconSvg);
- * <StyledArrowIcon colorClassName="accent-gray-6" width={24} height={24} />
+ * <StyledArrowIcon colorClassName="text-gray-6" width={24} height={24} />
  */
 export function createStyledIcon<P extends SvgProps>(IconComponent: ComponentType<P>) {
   return withUniwind(IconComponent, {
@@ -17,3 +17,5 @@ export function createStyledIcon<P extends SvgProps>(IconComponent: ComponentTyp
     },
   });
 }
+
+export type StyledIcon = ReturnType<typeof createStyledIcon>;
diff --git a/apps/mobile/src/shared/ui/Icon/icons.ts b/apps/mobile/src/shared/ui/Icon/icons.ts
index 999a2288..efedebcb 100644
--- a/apps/mobile/src/shared/ui/Icon/icons.ts
+++ b/apps/mobile/src/shared/ui/Icon/icons.ts
@@ -4,6 +4,7 @@ import ArrowRightIconSvg from '@assets/icons/ic_arrow_right.svg';
 import BellIconSvg from '@assets/icons/ic_bell.svg';
 import CheckIconSvg from '@assets/icons/ic_check.svg';
 import CheckmarkIconSvg from '@assets/icons/ic_checkmark.svg';
+import DeviceIconSvg from '@assets/icons/ic_device.svg';
 import DocsIconSvg from '@assets/icons/ic_docs.svg';
 import EyeIconSvg from '@assets/icons/ic_eye.svg';
 import EyeOffIconSvg from '@assets/icons/ic_eye_off.svg';
@@ -12,12 +13,14 @@ import KakaoIconSvg from '@assets/icons/ic_kakao.svg';
 import LockIconSvg from '@assets/icons/ic_lock.svg';
 import MenuIconSvg from '@assets/icons/ic_menu.svg';
 import MicIconSvg from '@assets/icons/ic_mic.svg';
+import MoonIconSvg from '@assets/icons/ic_moon.svg';
 import NaverIconSvg from '@assets/icons/ic_naver.svg';
 import PauseIconSvg from '@assets/icons/ic_pause.svg';
 import PersonIconSvg from '@assets/icons/ic_person.svg';
 import PlusIconSvg from '@assets/icons/ic_plus.svg';
 import SearchIconSvg from '@assets/icons/ic_search.svg';
 import SendIconSvg from '@assets/icons/ic_send.svg';
+import SunIconSvg from '@assets/icons/ic_sun.svg';
 import { createStyledIcon } from './createStyledIcon';
 
 // 래핑된 아이콘 컴포넌트들
@@ -27,6 +30,7 @@ export const ArrowRightIcon = createStyledIcon(ArrowRightIconSvg);
 export const BellIcon = createStyledIcon(BellIconSvg);
 export const CheckIcon = createStyledIcon(CheckIconSvg);
 export const CheckmarkIcon = createStyledIcon(CheckmarkIconSvg);
+export const DeviceIcon = createStyledIcon(DeviceIconSvg);
 export const DocsIcon = createStyledIcon(DocsIconSvg);
 export const EyeIcon = createStyledIcon(EyeIconSvg);
 export const EyeOffIcon = createStyledIcon(EyeOffIconSvg);
@@ -34,6 +38,7 @@ export const GoogleIcon = createStyledIcon(GoogleIconSvg);
 export const KakaoIcon = createStyledIcon(KakaoIconSvg);
 export const LockIcon = createStyledIcon(LockIconSvg);
 export const MenuIcon = createStyledIcon(MenuIconSvg);
+export const MoonIcon = createStyledIcon(MoonIconSvg);
 export const MicIcon = createStyledIcon(MicIconSvg);
 export const NaverIcon = createStyledIcon(NaverIconSvg);
 export const PauseIcon = createStyledIcon(PauseIconSvg);
@@ -41,3 +46,4 @@ export const PersonIcon = createStyledIcon(PersonIconSvg);
 export const PlusIcon = createStyledIcon(PlusIconSvg);
 export const SearchIcon = createStyledIcon(SearchIconSvg);
 export const SendIcon = createStyledIcon(SendIconSvg);
+export const SunIcon = createStyledIcon(SunIconSvg);
diff --git a/apps/mobile/src/shared/ui/Icon/index.ts b/apps/mobile/src/shared/ui/Icon/index.ts
index 63b8b50a..2b4840ff 100644
--- a/apps/mobile/src/shared/ui/Icon/index.ts
+++ b/apps/mobile/src/shared/ui/Icon/index.ts
@@ -1,20 +1,23 @@
-export { createStyledIcon } from './createStyledIcon';
+export { createStyledIcon, type StyledIcon as StyledIconType } from './createStyledIcon';
 export {
   AppleIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
   BellIcon,
   CheckIcon,
+  DeviceIcon,
   DocsIcon,
   GoogleIcon,
   KakaoIcon,
   LockIcon,
   MenuIcon,
   MicIcon,
+  MoonIcon,
   NaverIcon,
   PauseIcon,
   PersonIcon,
   PlusIcon,
   SearchIcon,
   SendIcon,
+  SunIcon,
 } from './icons';
diff --git a/apps/mobile/src/shared/ui/Input/Input.tsx b/apps/mobile/src/shared/ui/Input/Input.tsx
index 3b598c7f..2182de70 100644
--- a/apps/mobile/src/shared/ui/Input/Input.tsx
+++ b/apps/mobile/src/shared/ui/Input/Input.tsx
@@ -1,10 +1,13 @@
-import { clsx } from 'clsx';
+import { cn } from '@src/shared/utils/cn';
 import { forwardRef, useState } from 'react';
 import { TextInput, View } from 'react-native';
+import { withUniwind } from 'uniwind';
 import { Text } from '../Text/Text';
 import type { InputProps } from './Input.types';
 import { inputContainerVariants, inputLabelVariants, inputTextVariants } from './Input.variants';
 
+const StyledTextInput = withUniwind(TextInput);
+
 export const Input = forwardRef<TextInput, InputProps>(
   (
     {
@@ -34,13 +37,13 @@ export const Input = forwardRef<TextInput, InputProps>(
           </Text>
         )}
         <View
-          className={clsx(
+          className={cn(
             inputContainerVariants({ variant, size, isFocused, isDisabled, isInvalid }),
             className,
           )}
         >
           {leftContent && <View className="mr-3">{leftContent}</View>}
-          <TextInput
+          <StyledTextInput
             ref={ref}
             placeholder={placeholder}
             editable={!isDisabled}
diff --git a/apps/mobile/src/shared/ui/Input/Input.variants.ts b/apps/mobile/src/shared/ui/Input/Input.variants.ts
index 5670e975..c674f217 100644
--- a/apps/mobile/src/shared/ui/Input/Input.variants.ts
+++ b/apps/mobile/src/shared/ui/Input/Input.variants.ts
@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '@src/shared/utils/tv';
 
 export const inputLabelVariants = tv({
   base: 'text-gray-6',
diff --git a/apps/mobile/src/shared/ui/ListRow/ListRowImage.tsx b/apps/mobile/src/shared/ui/ListRow/ListRowImage.tsx
index c3a9c1b6..ca7d70dd 100644
--- a/apps/mobile/src/shared/ui/ListRow/ListRowImage.tsx
+++ b/apps/mobile/src/shared/ui/ListRow/ListRowImage.tsx
@@ -8,7 +8,7 @@ export interface ListRowImageProps extends Omit<ImageProps, 'style'> {
 
 export const ListRowImage = ({ size = 'medium', rounded = true, ...props }: ListRowImageProps) => {
   return (
-    <View style={[styles.container, styles[size], rounded && styles.rounded]}>
+    <View style={[styles.container, styles[size], rounded && styles.rounded]} className="bg-gray-3">
       <Image style={styles.image} resizeMode="cover" {...props} />
     </View>
   );
@@ -17,7 +17,6 @@ export const ListRowImage = ({ size = 'medium', rounded = true, ...props }: List
 const styles = StyleSheet.create({
   container: {
     overflow: 'hidden',
-    backgroundColor: '#F5F5F5',
   },
   image: {
     width: '100%',
diff --git a/apps/mobile/src/shared/ui/Text/Text.tsx b/apps/mobile/src/shared/ui/Text/Text.tsx
index 6ccb4043..58ae665d 100644
--- a/apps/mobile/src/shared/ui/Text/Text.tsx
+++ b/apps/mobile/src/shared/ui/Text/Text.tsx
@@ -1,4 +1,4 @@
-import { clsx } from 'clsx';
+import { cn } from '@src/shared/utils/cn';
 import { Text as RNText } from 'react-native';
 import type { TextProps } from './Text.types';
 import { shadeClasses, textVariants } from './Text.variants';
@@ -21,7 +21,7 @@ export function Text({
 
   return (
     <RNText
-      className={clsx(
+      className={cn(
         textVariants({ tone, size, weight, align, strikethrough, underline }),
         shadeClass,
         className,
diff --git a/apps/mobile/src/shared/ui/Text/Text.variants.ts b/apps/mobile/src/shared/ui/Text/Text.variants.ts
index 10b02a49..0f1ff2a6 100644
--- a/apps/mobile/src/shared/ui/Text/Text.variants.ts
+++ b/apps/mobile/src/shared/ui/Text/Text.variants.ts
@@ -1,65 +1,60 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '@src/shared/utils/tv';
 
-export const textVariants = tv(
-  {
-    base: 'font-normal',
+export const textVariants = tv({
+  base: 'font-normal',
 
-    variants: {
-      tone: {
-        neutral: 'text-foreground',
-        brand: 'text-main',
-        danger: 'text-error',
-        warning: 'text-warning',
-        success: 'text-success',
-        info: 'text-info',
-        white: 'text-white',
-      },
-      weight: {
-        normal: 'font-normal',
-        medium: 'font-medium',
-        semibold: 'font-semibold',
-        bold: 'font-bold',
-      },
-      size: {
-        h1: 'text-h1',
-        t1: 'text-t1',
-        t2: 'text-t2',
-        t3: 'text-t3',
-        b1: 'text-b1',
-        b2: 'text-b2',
-        b3: 'text-b3',
-        b4: 'text-b4',
-        e1: 'text-e1',
-        e2: 'text-e2',
-      },
-      align: {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right',
-      },
-      strikethrough: {
-        true: 'line-through',
-        false: '',
-      },
-      underline: {
-        true: 'underline',
-        false: '',
-      },
+  variants: {
+    tone: {
+      neutral: 'text-foreground',
+      brand: 'text-main',
+      danger: 'text-error',
+      warning: 'text-warning',
+      success: 'text-success',
+      info: 'text-info',
+      white: 'text-white',
     },
-
-    defaultVariants: {
-      weight: 'normal',
-      tone: 'neutral',
-      size: 'b3',
-      align: 'left',
-      strikethrough: false,
-      underline: false,
+    weight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+    },
+    size: {
+      h1: 'text-h1',
+      t1: 'text-t1',
+      t2: 'text-t2',
+      t3: 'text-t3',
+      b1: 'text-b1',
+      b2: 'text-b2',
+      b3: 'text-b3',
+      b4: 'text-b4',
+      e1: 'text-e1',
+      e2: 'text-e2',
+    },
+    align: {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+    },
+    strikethrough: {
+      true: 'line-through',
+      false: '',
+    },
+    underline: {
+      true: 'underline',
+      false: '',
     },
   },
-  {
-    twMerge: false,
+
+  defaultVariants: {
+    weight: 'normal',
+    tone: 'neutral',
+    size: 'b3',
+    align: 'left',
+    strikethrough: false,
+    underline: false,
   },
-);
+});
 
 export const shadeClasses: Record<number, string> = {
   1: 'text-gray-1',
diff --git a/apps/mobile/src/shared/ui/TextButton/TextButton.tsx b/apps/mobile/src/shared/ui/TextButton/TextButton.tsx
index cae1f736..fc56ee47 100644
--- a/apps/mobile/src/shared/ui/TextButton/TextButton.tsx
+++ b/apps/mobile/src/shared/ui/TextButton/TextButton.tsx
@@ -1,4 +1,4 @@
-import { clsx } from 'clsx';
+import { cn } from '@src/shared/utils/cn';
 import { PressableFeedback } from 'heroui-native';
 import { View } from 'react-native';
 import { ArrowRightIcon } from '../Icon';
@@ -33,7 +33,7 @@ export function TextButton({
   return (
     <PressableFeedback
       isDisabled={isDisabled}
-      className={clsx(textButtonVariants({ size, variant, isDisabled }), className)}
+      className={cn(textButtonVariants({ size, variant, isDisabled }), className)}
       {...props}
     >
       <Text size={textSizeMap[size]} shade={6} underline={variant === 'underline'}>
@@ -44,7 +44,7 @@ export function TextButton({
           <ArrowRightIcon
             width={iconSizeMap[size]}
             height={iconSizeMap[size]}
-            colorClassName="accent-gray-6"
+            colorClassName="text-gray-6"
           />
         </View>
       )}
diff --git a/apps/mobile/src/shared/ui/TextButton/TextButton.variants.ts b/apps/mobile/src/shared/ui/TextButton/TextButton.variants.ts
index 83561321..6d353339 100644
--- a/apps/mobile/src/shared/ui/TextButton/TextButton.variants.ts
+++ b/apps/mobile/src/shared/ui/TextButton/TextButton.variants.ts
@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '@src/shared/utils/tv';
 
 export const textButtonVariants = tv({
   base: 'items-center justify-center flex-row',
diff --git a/apps/mobile/src/shared/ui/VoiceTextField/VoiceTextField.tsx b/apps/mobile/src/shared/ui/VoiceTextField/VoiceTextField.tsx
index 795e9569..7781a705 100644
--- a/apps/mobile/src/shared/ui/VoiceTextField/VoiceTextField.tsx
+++ b/apps/mobile/src/shared/ui/VoiceTextField/VoiceTextField.tsx
@@ -1,6 +1,7 @@
 import { PressableFeedback, Spinner } from 'heroui-native';
 import { TextInput, type TextInputProps, View } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { useResolveClassNames } from 'uniwind';
 
 import { useBlinkAnimation } from '../../hooks/useBlinkAnimation';
 import { HStack } from '../HStack/HStack';
@@ -33,20 +34,31 @@ export const VoiceTextField = ({
   isLoading = false,
   placeholder,
   recognizingPlaceholder = '듣고 있어요...',
-  recognizingPlaceholderColor = '#EF4444',
-  micIconColor = '#F97316',
-  recordingIconColor = '#EF4444',
+  recognizingPlaceholderColor,
+  micIconColor,
+  recordingIconColor,
   hideMicButton = false,
   hideSendButton = false,
   maxLength = 500,
   containerClassName,
   ...textInputProps
 }: VoiceTextFieldProps) => {
+  const errorColor = useResolveClassNames('text-error');
+  const mainColor = useResolveClassNames('text-main');
+  const mutedColor = useResolveClassNames('text-gray-5');
+
+  const resolvedRecognizingPlaceholderColor =
+    recognizingPlaceholderColor ?? (errorColor.color as string);
+  const resolvedMicIconColor = micIconColor ?? (mainColor.color as string);
+  const resolvedRecordingIconColor = recordingIconColor ?? (errorColor.color as string);
+
   const hasText = value.trim().length > 0;
   const isInputDisabled = isLoading || isRecognizing;
 
   const displayPlaceholder = isRecognizing ? recognizingPlaceholder : placeholder;
-  const placeholderColor = isRecognizing ? recognizingPlaceholderColor : '#9CA3AF';
+  const placeholderColor = isRecognizing
+    ? resolvedRecognizingPlaceholderColor
+    : (mutedColor.color as string);
 
   return (
     <HStack
@@ -63,7 +75,7 @@ export const VoiceTextField = ({
         onChangeText={onChangeText}
         placeholder={displayPlaceholder}
         placeholderTextColor={placeholderColor}
-        className="flex-1"
+        className="flex-1 text-foreground"
         style={{ fontSize: 15, flex: 1 }}
         maxLength={maxLength}
         editable={!isInputDisabled}
@@ -75,8 +87,8 @@ export const VoiceTextField = ({
           onPress={onMicPress}
           isRecognizing={isRecognizing}
           isDisabled={isLoading}
-          micIconColor={micIconColor}
-          recordingIconColor={recordingIconColor}
+          micIconColor={resolvedMicIconColor}
+          recordingIconColor={resolvedRecordingIconColor}
         />
       )}
 
@@ -114,8 +126,8 @@ const MicButton = ({
   onPress,
   isRecognizing,
   isDisabled = false,
-  micIconColor = '#F97316',
-  recordingIconColor = '#EF4444',
+  micIconColor,
+  recordingIconColor,
   iconSize = 22,
 }: MicButtonProps) => {
   return (
diff --git a/apps/mobile/src/shared/utils/cn.ts b/apps/mobile/src/shared/utils/cn.ts
index c7560201..6dda6ec0 100644
--- a/apps/mobile/src/shared/utils/cn.ts
+++ b/apps/mobile/src/shared/utils/cn.ts
@@ -1,5 +1,33 @@
 import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+/**
+ * 커스텀 Tailwind 클래스 그룹 설정
+ * text-* 접두사를 사용하는 커스텀 유틸리티가 색상 클래스와 충돌하지 않도록 분리
+ */
+const customClassGroups = {
+  'text-input': ['text-input-sm', 'text-input-md', 'text-input-lg'],
+  'text-size': [
+    'text-h1',
+    'text-t1',
+    'text-t2',
+    'text-t3',
+    'text-b1',
+    'text-b2',
+    'text-b3',
+    'text-b4',
+    'text-e1',
+    'text-e2',
+  ],
+} as const;
+
+type CustomClassGroupIds = keyof typeof customClassGroups;
+
+const customTwMerge = extendTailwindMerge<CustomClassGroupIds>({
+  extend: {
+    classGroups: customClassGroups,
+  },
+});
 
 /**
  * Tailwind 클래스 병합 유틸리티
@@ -12,5 +40,5 @@ import { twMerge } from 'tailwind-merge';
  * cn('text-red-500', condition && 'text-blue-500') // 조건부 적용
  */
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return customTwMerge(clsx(inputs));
 }
diff --git a/apps/mobile/src/shared/utils/tv.ts b/apps/mobile/src/shared/utils/tv.ts
new file mode 100644
index 00000000..ff1193b7
--- /dev/null
+++ b/apps/mobile/src/shared/utils/tv.ts
@@ -0,0 +1,30 @@
+import { createTV } from 'tailwind-variants';
+
+/**
+ * 커스텀 tailwind-variants 설정
+ *
+ * twMerge에서 커스텀 유틸리티 클래스 충돌 방지
+ * - text-input-* 는 text-gray-* 와 다른 그룹으로 처리
+ */
+export const tv = createTV({
+  twMergeConfig: {
+    extend: {
+      classGroups: {
+        // 커스텀 유틸리티 추가 시 여기에 등록
+        'text-input': ['text-input-sm', 'text-input-md', 'text-input-lg'],
+        'text-size': [
+          'text-h1',
+          'text-t1',
+          'text-t2',
+          'text-t3',
+          'text-b1',
+          'text-b2',
+          'text-b3',
+          'text-b4',
+          'text-e1',
+          'text-e2',
+        ],
+      },
+    },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3881ca6c..dc0d2b4c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -278,7 +278,7 @@ importers:
         version: 10.28.0
       ts-jest:
         specifier: ^29.2.5
-        version: 29.4.6(@babel/core@7.28.6)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.6))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.19.7))(typescript@5.9.3)
+        version: 29.4.6(@babel/core@7.28.6)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.6))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))(typescript@5.9.3)
       ts-loader:
         specifier: ^9.5.2
         version: 9.5.4(typescript@5.9.3)(webpack@5.104.1(@swc/core@1.15.10))
@@ -395,7 +395,7 @@ importers:
         version: 0.32.16(expo@54.0.32)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
       expo-router:
         specifier: ~6.0.21
-        version: 6.0.22(mllt32izckasj5wj2ji7iejztu)
+        version: 6.0.22(gf35npbqodqf3wkccleox2bdiy)
       expo-secure-store:
         specifier: ~15.0.8
         version: 15.0.8(expo@54.0.32)
@@ -450,6 +450,9 @@ importers:
       react-native-keyboard-controller:
         specifier: ^1.20.6
         version: 1.20.6(react-native-reanimated@4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react-native-mmkv:
+        specifier: '3'
+        version: 3.3.3(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
       react-native-modal-datetime-picker:
         specifier: ^18.0.0
         version: 18.0.0(@react-native-community/datetimepicker@8.6.0(expo@54.0.32)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))
@@ -504,7 +507,7 @@ importers:
         version: link:../../tooling/typescript
       '@testing-library/react-native':
         specifier: ^13.3.3
-        version: 13.3.3(jest@29.7.0(@types/node@22.19.7))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react-test-renderer@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 13.3.3(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react-test-renderer@19.1.0(react@19.1.0))(react@19.1.0)
       '@types/jest':
         specifier: ^29.5.0
         version: 29.5.14
@@ -522,7 +525,7 @@ importers:
         version: 29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3))
       jest-expo:
         specifier: ~54.0.0
-        version: 54.0.16(@babel/core@7.28.6)(expo@54.0.32)(jest@29.7.0(@types/node@22.19.7))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 54.0.16(@babel/core@7.28.6)(expo@54.0.32)(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
       react-native-svg-transformer:
         specifier: ^1.5.2
         version: 1.5.3(react-native-svg@15.15.1(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(typescript@5.9.3)
@@ -546,7 +549,7 @@ importers:
         version: 29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3))
       ts-jest:
         specifier: ^29.2.5
-        version: 29.4.6(@babel/core@7.28.6)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.6))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.19.7))(typescript@5.9.3)
+        version: 29.4.6(@babel/core@7.28.6)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.6))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))(typescript@5.9.3)
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
@@ -588,7 +591,7 @@ importers:
         version: 29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3))
       ts-jest:
         specifier: ^29.2.5
-        version: 29.4.6(@babel/core@7.28.6)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.6))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.19.7))(typescript@5.9.3)
+        version: 29.4.6(@babel/core@7.28.6)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.6))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))(typescript@5.9.3)
 
   tooling/typescript: {}
 
@@ -7547,6 +7550,12 @@ packages:
       react-native: '*'
       react-native-reanimated: '>=3.0.0'
 
+  react-native-mmkv@3.3.3:
+    resolution: {integrity: sha512-GMsfOmNzx0p5+CtrCFRVtpOOMYNJXuksBVARSQrCFaZwjUyHJdQzcN900GGaFFNTxw2fs8s5Xje//RDKj9+PZA==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
   react-native-modal-datetime-picker@18.0.0:
     resolution: {integrity: sha512-0jdvhhraZQlRACwr7pM6vmZ2kxgzJ4CpnmV6J3TVA6MrXMXK6Zo/upRBKkRp0+fTOiKuNblzesA2U59rYo6SGA==}
     peerDependencies:
@@ -8334,7 +8343,7 @@ packages:
   tar@7.5.6:
     resolution: {integrity: sha512-xqUeu2JAIJpXyvskvU3uvQW8PAmHrtXp2KDuMJwQqW8Sqq0CaZBAQ+dKS3RBXVhU4wC5NjAdKrmh84241gO9cA==}
     engines: {node: '>=18'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
@@ -10136,7 +10145,7 @@ snapshots:
       wrap-ansi: 7.0.0
       ws: 8.19.0
     optionalDependencies:
-      expo-router: 6.0.22(mllt32izckasj5wj2ji7iejztu)
+      expo-router: 6.0.22(gf35npbqodqf3wkccleox2bdiy)
       react-native: 0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0)
     transitivePeerDependencies:
       - bufferutil
@@ -11973,7 +11982,7 @@ snapshots:
       - react-native-b4a
       - supports-color
 
-  '@testing-library/react-native@13.3.3(jest@29.7.0(@types/node@22.19.7))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react-test-renderer@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@testing-library/react-native@13.3.3(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react-test-renderer@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       jest-matcher-utils: 30.2.0
       picocolors: 1.1.1
@@ -14132,7 +14141,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  expo-router@6.0.22(mllt32izckasj5wj2ji7iejztu):
+  expo-router@6.0.22(gf35npbqodqf3wkccleox2bdiy):
     dependencies:
       '@expo/metro-runtime': 6.1.2(expo@54.0.32)(react-dom@19.1.0(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
       '@expo/schema-utils': 0.1.8
@@ -14165,7 +14174,7 @@ snapshots:
       use-latest-callback: 0.2.6(react@19.1.0)
       vaul: 1.1.2(@types/react@19.1.17)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
     optionalDependencies:
-      '@testing-library/react-native': 13.3.3(jest@29.7.0(@types/node@22.19.7))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react-test-renderer@19.1.0(react@19.1.0))(react@19.1.0)
+      '@testing-library/react-native': 13.3.3(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react-test-renderer@19.1.0(react@19.1.0))(react@19.1.0)
       react-dom: 19.1.0(react@19.1.0)
       react-native-gesture-handler: 2.30.0(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
       react-native-reanimated: 4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
@@ -15253,7 +15262,7 @@ snapshots:
       jest-mock: 29.7.0
       jest-util: 29.7.0
 
-  jest-expo@54.0.16(@babel/core@7.28.6)(expo@54.0.32)(jest@29.7.0(@types/node@22.19.7))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  jest-expo@54.0.16(@babel/core@7.28.6)(expo@54.0.32)(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
     dependencies:
       '@expo/config': 12.0.13
       '@expo/json-file': 10.0.8
@@ -15264,7 +15273,7 @@ snapshots:
       jest-environment-jsdom: 29.7.0
       jest-snapshot: 29.7.0
       jest-watch-select-projects: 2.0.0
-      jest-watch-typeahead: 2.2.1(jest@29.7.0(@types/node@22.19.7))
+      jest-watch-typeahead: 2.2.1(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))
       json5: 2.2.3
       lodash: 4.17.23
       react-native: 0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0)
@@ -15497,7 +15506,7 @@ snapshots:
       chalk: 3.0.0
       prompts: 2.4.2
 
-  jest-watch-typeahead@2.2.1(jest@29.7.0(@types/node@22.19.7)):
+  jest-watch-typeahead@2.2.1(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3))):
     dependencies:
       ansi-escapes: 6.2.1
       chalk: 4.1.2
@@ -16999,6 +17008,11 @@ snapshots:
       react-native-is-edge-to-edge: 1.2.1(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
       react-native-reanimated: 4.1.6(@babel/core@7.28.6)(react-native-worklets@0.5.1(@babel/core@7.28.6)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
 
+  react-native-mmkv@3.3.3(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-native: 0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0)
+
   react-native-modal-datetime-picker@18.0.0(@react-native-community/datetimepicker@8.6.0(expo@54.0.32)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0)):
     dependencies:
       '@react-native-community/datetimepicker': 8.6.0(expo@54.0.32)(react-native@0.81.5(@babel/core@7.28.6)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
@@ -18059,7 +18073,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-jest@29.4.6(@babel/core@7.28.6)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.6))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.19.7))(typescript@5.9.3):
+  ts-jest@29.4.6(@babel/core@7.28.6)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.6))(jest-util@30.2.0)(jest@29.7.0(@types/node@22.19.7)(ts-node@10.9.2(@swc/core@1.15.10)(@types/node@22.19.7)(typescript@5.9.3)))(typescript@5.9.3):
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0