fix bug themes

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";
 

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<Todo | null>(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

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 { ThemeProvider as AppThemeProvider, useThemeContext } from "@/hooks/use-theme-context";
-import { useColorScheme } from "react-native";
 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(() => {
@@ -42,7 +40,7 @@ function AppContent() {
           }}
         />
 
-        {/* <Stack.Screen
+        <Stack.Screen
           name="(tabs)"
           options={{
             title: "Home",
@@ -53,7 +51,7 @@ function AppContent() {
         <Stack.Screen
           name="modal"
           options={{ presentation: "formSheet", title: "Modal" }}
-        /> */}
+        />
       </Stack>
       <StatusBar style="auto" />
       <Toast config={toastConfig} visibilityTime={2000} topOffset={60} />

components/parallax-scroll-view.tsx

@@ -1,15 +1,15 @@
 import type { PropsWithChildren, ReactElement } from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, {
-  interpolate,
+    interpolate,
-  useAnimatedRef,
+    useAnimatedRef,
-  useAnimatedStyle,
+    useAnimatedStyle,
-  useScrollOffset,
+    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<Animated.ScrollView>();
   const scrollOffset = useScrollOffset(scrollRef);
   const headerAnimatedStyle = useAnimatedStyle(() => {

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 (
     <ThemedView>

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