From 7cb35efd30ba09ae24de989b65e2247e1c7546da Mon Sep 17 00:00:00 2001 From: MinhNN Date: Wed, 19 Nov 2025 17:11:10 +0700 Subject: [PATCH] fix bug themes --- app/(tabs)/_layout.tsx | 2 +- app/(tabs)/setting.tsx | 8 ++++---- app/_layout.tsx | 6 ++---- components/parallax-scroll-view.tsx | 12 ++++++------ components/ui/collapsible.tsx | 4 ++-- hooks/use-theme-color.ts | 4 ++-- 6 files changed, 17 insertions(+), 19 deletions(-) diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 942c2e6..085d9e5 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -3,8 +3,8 @@ import { Tabs, useSegments } from "expo-router"; import { HapticTab } from "@/components/haptic-tab"; import { IconSymbol } from "@/components/ui/icon-symbol"; import { Colors } from "@/constants/theme"; -import { useColorScheme } from "@/hooks/use-color-scheme"; import { useI18n } from "@/hooks/use-i18n"; +import { useColorScheme } from "@/hooks/use-theme-context"; import { startEvents, stopEvents } from "@/services/device_events"; import { useEffect, useRef } from "react"; diff --git a/app/(tabs)/setting.tsx b/app/(tabs)/setting.tsx index a535124..47ee9f9 100644 --- a/app/(tabs)/setting.tsx +++ b/app/(tabs)/setting.tsx @@ -1,16 +1,16 @@ import { useRouter } from "expo-router"; import { useEffect, useState } from "react"; -import { StyleSheet, View, ScrollView } from "react-native"; +import { ScrollView, StyleSheet, View } from "react-native"; import EnIcon from "@/assets/icons/en_icon.png"; import VnIcon from "@/assets/icons/vi_icon.png"; import RotateSwitch from "@/components/rotate-switch"; +import { ThemeToggle } from "@/components/theme-toggle"; import { ThemedText } from "@/components/themed-text"; import { ThemedView } from "@/components/themed-view"; -import { ThemeToggle } from "@/components/theme-toggle"; import { DOMAIN, TOKEN } from "@/constants"; +import { useAppTheme } from "@/hooks/use-app-theme"; import { useI18n } from "@/hooks/use-i18n"; -import { useThemeContext } from "@/hooks/use-theme-context"; import { removeStorageItem } from "@/utils/storage"; import { SafeAreaView } from "react-native-safe-area-context"; type Todo = { @@ -24,7 +24,7 @@ export default function SettingScreen() { const router = useRouter(); const [data, setData] = useState(null); const { t, locale, setLocale } = useI18n(); - const { colors } = useThemeContext(); + const { colors } = useAppTheme(); const [isEnabled, setIsEnabled] = useState(locale === "vi"); // Sync isEnabled state khi locale thay đổi diff --git a/app/_layout.tsx b/app/_layout.tsx index 97196f2..0569a30 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -14,14 +14,12 @@ import { toastConfig } from "@/config"; import { setRouterInstance } from "@/config/auth"; import "@/global.css"; import { I18nProvider } from "@/hooks/use-i18n"; -import { ThemeProvider as AppThemeProvider } from "@/hooks/use-theme-context"; -import { useColorScheme } from "react-native"; +import { ThemeProvider as AppThemeProvider, useThemeContext } from "@/hooks/use-theme-context"; import Toast from "react-native-toast-message"; import "../global.css"; function AppContent() { - // const { colorScheme } = useThemeContext(); const router = useRouter(); - const colorScheme = useColorScheme(); + const { colorScheme } = useThemeContext(); console.log("Color Scheme: ", colorScheme); useEffect(() => { diff --git a/components/parallax-scroll-view.tsx b/components/parallax-scroll-view.tsx index 6f674a7..a044380 100644 --- a/components/parallax-scroll-view.tsx +++ b/components/parallax-scroll-view.tsx @@ -1,15 +1,15 @@ import type { PropsWithChildren, ReactElement } from 'react'; import { StyleSheet } from 'react-native'; import Animated, { - interpolate, - useAnimatedRef, - useAnimatedStyle, - useScrollOffset, + interpolate, + useAnimatedRef, + useAnimatedStyle, + useScrollOffset, } from 'react-native-reanimated'; import { ThemedView } from '@/components/themed-view'; -import { useColorScheme } from '@/hooks/use-color-scheme'; import { useThemeColor } from '@/hooks/use-theme-color'; +import { useColorScheme } from '@/hooks/use-theme-context'; const HEADER_HEIGHT = 250; @@ -24,7 +24,7 @@ export default function ParallaxScrollView({ headerBackgroundColor, }: Props) { const backgroundColor = useThemeColor({}, 'background'); - const colorScheme = useColorScheme() ?? 'light'; + const colorScheme = useColorScheme(); const scrollRef = useAnimatedRef(); const scrollOffset = useScrollOffset(scrollRef); const headerAnimatedStyle = useAnimatedStyle(() => { diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx index 6345fde..08ef4e8 100644 --- a/components/ui/collapsible.tsx +++ b/components/ui/collapsible.tsx @@ -5,11 +5,11 @@ import { ThemedText } from '@/components/themed-text'; import { ThemedView } from '@/components/themed-view'; import { IconSymbol } from '@/components/ui/icon-symbol'; import { Colors } from '@/constants/theme'; -import { useColorScheme } from '@/hooks/use-color-scheme'; +import { useColorScheme } from '@/hooks/use-theme-context'; export function Collapsible({ children, title }: PropsWithChildren & { title: string }) { const [isOpen, setIsOpen] = useState(false); - const theme = useColorScheme() ?? 'light'; + const theme = useColorScheme(); return ( diff --git a/hooks/use-theme-color.ts b/hooks/use-theme-color.ts index 2b36f97..fead086 100644 --- a/hooks/use-theme-color.ts +++ b/hooks/use-theme-color.ts @@ -4,13 +4,13 @@ */ import { Colors } from "@/constants/theme"; -import { useColorScheme } from "@/hooks/use-color-scheme"; +import { useColorScheme } from "@/hooks/use-theme-context"; export function useThemeColor( props: { light?: string; dark?: string }, colorName: keyof typeof Colors.light & keyof typeof Colors.dark ) { - const theme = useColorScheme() ?? "light"; + const theme = useColorScheme(); const colorFromProps = props[theme]; if (colorFromProps) {