feat: update color scheme and styles across components for improved UI consistency

components/settings/APIConfigSection.tsx

@@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";
 
 interface APIConfigSectionProps {
   onChanged: () => void;
@@ -126,8 +127,8 @@ const styles = StyleSheet.create({
     borderColor: "transparent",
   },
   inputFocused: {
-    borderColor: "#007AFF",
-    shadowColor: "#007AFF",
+    borderColor: Colors.dark.primary,
+    shadowColor: Colors.dark.primary,
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.8,
     shadowRadius: 10,

components/settings/LiveStreamSection.tsx

@@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";
 
 interface LiveStreamSectionProps {
   onChanged: () => void;
@@ -120,8 +121,8 @@ const styles = StyleSheet.create({
     borderColor: "transparent",
   },
   inputFocused: {
-    borderColor: "#007AFF",
-    shadowColor: "#007AFF",
+    borderColor: Colors.dark.primary,
+    shadowColor: Colors.dark.primary,
     shadowOffset: { width: 0, height: 0 },
     shadowOpacity: 0.8,
     shadowRadius: 10,

components/settings/RemoteInputSection.tsx

@@ -6,6 +6,7 @@ import { SettingsSection } from "./SettingsSection";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRemoteControlStore } from "@/stores/remoteControlStore";
 import { useButtonAnimation } from "@/hooks/useAnimation";
+import { Colors } from "@/constants/Colors";
 
 interface RemoteInputSectionProps {
   onChanged: () => void;
@@ -59,7 +60,7 @@ export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChange
           <Switch
             value={remoteInputEnabled}
             onValueChange={() => {}} // 禁用Switch的直接交互
-            trackColor={{ false: "#767577", true: "#007AFF" }}
+            trackColor={{ false: "#767577", true: Colors.dark.primary }}
             thumbColor={remoteInputEnabled ? "#ffffff" : "#f4f3f4"}
             pointerEvents="none"
           />
@@ -70,7 +71,7 @@ export const RemoteInputSection: React.FC<RemoteInputSectionProps> = ({ onChange
         <View style={styles.statusContainer}>
           <View style={styles.statusItem}>
             <ThemedText style={styles.statusLabel}>服务状态：</ThemedText>
-            <ThemedText style={[styles.statusValue, { color: isServerRunning ? "#00FF00" : "#FF6B6B" }]}>
+            <ThemedText style={[styles.statusValue, { color: isServerRunning ? Colors.dark.primary : "#FF6B6B" }]}>
               {isServerRunning ? "运行中" : "已停止"}
             </ThemedText>
           </View>

components/settings/SettingsSection.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { StyleSheet, Pressable } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
+import { Colors } from "@/constants/Colors";
 
 interface SettingsSectionProps {
   children: React.ReactNode;
@@ -9,12 +10,7 @@ interface SettingsSectionProps {
   focusable?: boolean;
 }
 
-export const SettingsSection: React.FC<SettingsSectionProps> = ({ 
-  children, 
-  onFocus, 
-  onBlur, 
-  focusable = false 
-}) => {
+export const SettingsSection: React.FC<SettingsSectionProps> = ({ children, onFocus, onBlur, focusable = false }) => {
   const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = () => {
@@ -28,20 +24,12 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
   };
 
   if (!focusable) {
-    return (
-      <ThemedView style={styles.section}>
-        {children}
-      </ThemedView>
-    );
+    return <ThemedView style={styles.section}>{children}</ThemedView>;
   }
 
   return (
     <ThemedView style={[styles.section, isFocused && styles.sectionFocused]}>
-      <Pressable
-        style={styles.sectionPressable}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-      >
+      <Pressable style={styles.sectionPressable} onFocus={handleFocus} onBlur={handleBlur}>
         {children}
       </Pressable>
     </ThemedView>
@@ -57,10 +45,10 @@ const styles = StyleSheet.create({
     borderColor: "#333",
   },
   sectionFocused: {
-    borderColor: "#007AFF",
+    borderColor: Colors.dark.primary,
     backgroundColor: "#007AFF10",
   },
   sectionPressable: {
     width: "100%",
   },
-});
+});