update theme dark, light mode

app/(tabs)/setting.tsx

@@ -1,15 +1,18 @@
 import { useRouter } from "expo-router";
 import { useEffect, useState } from "react";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View, ScrollView } 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 { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
+import { ThemeToggle } from "@/components/theme-toggle";
 import { DOMAIN, TOKEN } from "@/constants";
 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 = {
   userId: number;
   id: number;
@@ -21,7 +24,9 @@ export default function SettingScreen() {
   const router = useRouter();
   const [data, setData] = useState<Todo | null>(null);
   const { t, locale, setLocale } = useI18n();
+  const { colors } = useThemeContext();
   const [isEnabled, setIsEnabled] = useState(locale === "vi");
+
   // Sync isEnabled state khi locale thay đổi
   useEffect(() => {
     setIsEnabled(locale === "vi");
@@ -33,72 +38,116 @@ export default function SettingScreen() {
   };
 
   return (
-    <ThemedView style={styles.container}>
-      <ThemedText type="title">{t("navigation.setting")}</ThemedText>
+    <SafeAreaView style={styles.safeArea} edges={["top", "left", "right"]}>
+      <ThemedView style={styles.container}>
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          <ThemedText type="title" style={styles.title}>
+            {t("navigation.setting")}
+          </ThemedText>
 
-      <View style={styles.settingItem}>
-        <ThemedText type="default">{t("common.language")}</ThemedText>
-        {/* <Switch
-          trackColor={{ false: "#767577", true: "#81b0ff" }}
-          thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
-          ios_backgroundColor="#3e3e3e"
-          onValueChange={toggleSwitch}
-          value={isEnabled}
-        /> */}
-        <RotateSwitch
-          initialValue={isEnabled}
-          onChange={toggleSwitch}
-          size="sm"
-          offImage={EnIcon}
-          onImage={VnIcon}
-        />
-      </View>
+          {/* Theme Toggle Section */}
+          <ThemeToggle style={styles.themeSection} />
 
-      <ThemedView
-        style={styles.button}
-        onTouchEnd={async () => {
-          await removeStorageItem(TOKEN);
-          await removeStorageItem(DOMAIN);
-          router.navigate("/auth/login");
-        }}
-      >
-        <ThemedText type="defaultSemiBold">{t("auth.logout")}</ThemedText>
+          {/* Language Section */}
+          <View
+            style={[
+              styles.settingItem,
+              {
+                backgroundColor: colors.surface,
+                borderColor: colors.border,
+              },
+            ]}
+          >
+            <ThemedText type="default">{t("common.language")}</ThemedText>
+            <RotateSwitch
+              initialValue={isEnabled}
+              onChange={toggleSwitch}
+              size="sm"
+              offImage={EnIcon}
+              onImage={VnIcon}
+            />
+          </View>
+
+          {/* Logout Button */}
+          <ThemedView
+            style={[styles.button, { backgroundColor: colors.primary }]}
+            onTouchEnd={async () => {
+              await removeStorageItem(TOKEN);
+              await removeStorageItem(DOMAIN);
+              router.navigate("/auth/login");
+            }}
+          >
+            <ThemedText type="defaultSemiBold" style={styles.buttonText}>
+              {t("auth.logout")}
+            </ThemedText>
+          </ThemedView>
+
+          {data && (
+            <ThemedView
+              style={[styles.debugSection, { backgroundColor: colors.surface }]}
+            >
+              <ThemedText type="default">{data.title}</ThemedText>
+              <ThemedText type="default">{data.completed}</ThemedText>
+              <ThemedText type="default">{data.id}</ThemedText>
+            </ThemedView>
+          )}
+        </ScrollView>
       </ThemedView>
-
-      {data && (
-        <ThemedView style={{ marginTop: 20 }}>
-          <ThemedText type="default">{data.title}</ThemedText>
-          <ThemedText type="default">{data.completed}</ThemedText>
-          <ThemedText type="default">{data.id}</ThemedText>
-        </ThemedView>
-      )}
-    </ThemedView>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    paddingBottom: 5,
+  },
   container: {
     flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
     padding: 20,
     gap: 16,
   },
+  title: {
+    textAlign: "center",
+    marginBottom: 20,
+  },
+  themeSection: {
+    marginBottom: 8,
+  },
   settingItem: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    width: "100%",
     paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderRadius: 8,
-    backgroundColor: "rgba(0, 122, 255, 0.1)",
+    paddingVertical: 16,
+    borderRadius: 12,
+    borderWidth: 1,
   },
   button: {
     marginTop: 20,
-    paddingVertical: 12,
+    paddingVertical: 14,
     paddingHorizontal: 20,
-    backgroundColor: "#007AFF",
-    borderRadius: 8,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+  },
+  debugSection: {
+    marginTop: 20,
+    padding: 16,
+    borderRadius: 12,
+    gap: 8,
   },
 });