feat(chat): implement dynamic theme support in chat components

- Enhanced ChatHeader and ChatInput components to support dynamic theme colors, improving visual consistency across different themes.
- Updated styles in ChatScreen to utilize new dynamic styles for better responsiveness and user experience.
- Refactored styles in various profile screens to adopt a unified background color scheme and improved spacing for a cleaner layout.

This update significantly enhances the chat interface and profile settings by allowing for dynamic theming and improved visual elements.

src/screens/profile/ChatSettingsScreen.tsx

@@ -139,39 +139,36 @@ function createStyles(colors: AppColors) {
   return StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: colors.background.default,
+      backgroundColor: colors.background.paper,
     },
     scrollContent: {
-      paddingVertical: spacing.md,
+      paddingVertical: spacing.lg,
     },
     section: {
-      marginBottom: spacing.lg,
+      marginBottom: spacing['2xl'],
       maxWidth: CARD_MAX_WIDTH,
       alignSelf: 'center',
       width: '100%',
-      paddingHorizontal: spacing.lg,
+      paddingHorizontal: spacing['2xl'],
     },
     sectionTitle: {
       fontSize: fontSizes.sm,
       fontWeight: '600',
       color: colors.text.secondary,
       marginBottom: spacing.sm,
-      marginLeft: spacing.xs,
-    },
-    card: {
-      backgroundColor: colors.background.paper,
-      borderRadius: borderRadius.lg,
-      padding: spacing.md,
+      marginTop: spacing.sm,
+      textTransform: 'uppercase',
+      letterSpacing: 0.5,
     },
     // 聊天预览样式
     previewContainer: {
-      backgroundColor: '#E8F5E9',
-      borderRadius: borderRadius.lg,
+      backgroundColor: colors.primary.light + '20',
+      borderRadius: 14,
       padding: spacing.md,
       minHeight: 140,
     },
     previewMessage: {
-      backgroundColor: '#FFFFFF',
+      backgroundColor: colors.background.paper,
       borderRadius: borderRadius.md,
       padding: spacing.sm,
       marginBottom: spacing.sm,
@@ -186,11 +183,11 @@ function createStyles(colors: AppColors) {
     },
     previewText: {
       fontSize: fontSizes.sm,
-      color: '#333',
+      color: colors.text.primary,
     },
     previewTime: {
       fontSize: fontSizes.xs,
-      color: '#999',
+      color: colors.text.hint,
       marginTop: 2,
       alignSelf: 'flex-end',
     },
@@ -243,13 +240,13 @@ function createStyles(colors: AppColors) {
       marginTop: 4,
       color: colors.text.secondary,
     },
-    // 设置项样式
+    // 设置项样式 - 扁平化
     settingItem: {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      paddingVertical: spacing.md,
-      borderBottomWidth: 1,
+      paddingVertical: 16,
+      borderBottomWidth: StyleSheet.hairlineWidth,
       borderBottomColor: colors.divider,
     },
     settingItemLast: {
@@ -258,15 +255,14 @@ function createStyles(colors: AppColors) {
     settingItemLeft: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: spacing.md,
+      flex: 1,
     },
     iconContainer: {
-      width: 36,
-      height: 36,
-      borderRadius: borderRadius.md,
-      backgroundColor: colors.primary.light + '20',
+      width: 24,
+      height: 24,
       justifyContent: 'center',
       alignItems: 'center',
+      marginRight: spacing.lg,
     },
     settingTitle: {
       fontSize: fontSizes.md,
@@ -277,6 +273,10 @@ function createStyles(colors: AppColors) {
       color: colors.text.secondary,
       marginTop: 2,
     },
+    // 滑块容器 - 扁平化
+    sliderContainer: {
+      paddingVertical: 8,
+    },
     // 开关样式
     switch: {
       width: 50,
@@ -292,7 +292,7 @@ function createStyles(colors: AppColors) {
       width: 24,
       height: 24,
       borderRadius: 12,
-      backgroundColor: '#fff',
+      backgroundColor: colors.background.paper,
     },
   });
 }
@@ -349,7 +349,7 @@ export const ChatSettingsScreen: React.FC = () => {
   const renderFontSizeSlider = () => (
     <View style={styles.section}>
       <Text style={styles.sectionTitle}>消息字号</Text>
-      <View style={styles.card}>
+      <View style={styles.sliderContainer}>
         <Slider
           value={fontSize}
           min={12}
@@ -399,7 +399,7 @@ export const ChatSettingsScreen: React.FC = () => {
   const renderRadiusSlider = () => (
     <View style={styles.section}>
       <Text style={styles.sectionTitle}>消息圆角</Text>
-      <View style={styles.card}>
+      <View style={styles.sliderContainer}>
         <Slider
           value={messageRadius}
           min={0}
@@ -414,53 +414,49 @@ export const ChatSettingsScreen: React.FC = () => {
   const renderOtherSettings = () => (
     <View style={styles.section}>
       <Text style={styles.sectionTitle}>其他</Text>
-      <View style={styles.card}>
-        <TouchableOpacity style={styles.settingItem}>
-          <View style={styles.settingItemLeft}>
-            <View style={styles.iconContainer}>
-              <MaterialCommunityIcons name="image-outline" size={20} color={colors.primary.main} />
-            </View>
-            <View>
-              <Text style={styles.settingTitle}>更改聊天壁纸</Text>
-            </View>
+      <TouchableOpacity style={styles.settingItem}>
+        <View style={styles.settingItemLeft}>
+          <View style={styles.iconContainer}>
+            <MaterialCommunityIcons name="image-outline" size={22} color={colors.text.secondary} />
           </View>
-          <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
-        </TouchableOpacity>
-        
-        <TouchableOpacity style={[styles.settingItem, styles.settingItemLast]}>
-          <View style={styles.settingItemLeft}>
-            <View style={styles.iconContainer}>
-              <MaterialCommunityIcons name="palette-outline" size={20} color={colors.primary.main} />
-            </View>
-            <View>
-              <Text style={styles.settingTitle}>更改名称颜色</Text>
-              <Text style={styles.settingSubtitle}>MiMQy</Text>
-            </View>
+          <View>
+            <Text style={styles.settingTitle}>更改聊天壁纸</Text>
           </View>
-          <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
-        </TouchableOpacity>
-      </View>
+        </View>
+        <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
+      </TouchableOpacity>
+      
+      <TouchableOpacity style={[styles.settingItem, styles.settingItemLast]}>
+        <View style={styles.settingItemLeft}>
+          <View style={styles.iconContainer}>
+            <MaterialCommunityIcons name="palette-outline" size={22} color={colors.text.secondary} />
+          </View>
+          <View>
+            <Text style={styles.settingTitle}>更改名称颜色</Text>
+            <Text style={styles.settingSubtitle}>MiMQy</Text>
+          </View>
+        </View>
+        <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
+      </TouchableOpacity>
     </View>
   );
 
   // 渲染夜间模式开关
   const renderNightMode = () => (
     <View style={styles.section}>
-      <View style={styles.card}>
-        <View style={[styles.settingItem, styles.settingItemLast]}>
-          <View style={styles.settingItemLeft}>
-            <View style={styles.iconContainer}>
-              <MaterialCommunityIcons name="weather-night" size={20} color={colors.primary.main} />
-            </View>
-            <Text style={styles.settingTitle}>切换到夜间模式</Text>
+      <View style={[styles.settingItem, styles.settingItemLast]}>
+        <View style={styles.settingItemLeft}>
+          <View style={styles.iconContainer}>
+            <MaterialCommunityIcons name="weather-night" size={22} color={colors.text.secondary} />
           </View>
-          <TouchableOpacity 
-            style={[styles.switch, nightMode && styles.switchActive]}
-            onPress={() => toggleNightMode()}
-          >
-            <View style={[styles.switchThumb, { alignSelf: nightMode ? 'flex-end' : 'flex-start' }]} />
-          </TouchableOpacity>
+          <Text style={styles.settingTitle}>切换到夜间模式</Text>
         </View>
+        <TouchableOpacity 
+          style={[styles.switch, nightMode && styles.switchActive]}
+          onPress={() => toggleNightMode()}
+        >
+          <View style={[styles.switchThumb, { alignSelf: nightMode ? 'flex-end' : 'flex-start' }]} />
+        </TouchableOpacity>
       </View>
     </View>
   );
@@ -468,16 +464,14 @@ export const ChatSettingsScreen: React.FC = () => {
   // 渲染浏览其他主题
   const renderBrowseThemes = () => (
     <View style={styles.section}>
-      <TouchableOpacity style={styles.card}>
-        <View style={[styles.settingItem, styles.settingItemLast]}>
-          <View style={styles.settingItemLeft}>
-            <View style={styles.iconContainer}>
-              <MaterialCommunityIcons name="apps" size={20} color={colors.primary.main} />
-            </View>
-            <Text style={styles.settingTitle}>浏览其他主题</Text>
+      <TouchableOpacity style={[styles.settingItem, styles.settingItemLast]}>
+        <View style={styles.settingItemLeft}>
+          <View style={styles.iconContainer}>
+            <MaterialCommunityIcons name="apps" size={22} color={colors.text.secondary} />
           </View>
-          <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
+          <Text style={styles.settingTitle}>浏览其他主题</Text>
         </View>
+        <MaterialCommunityIcons name="chevron-right" size={20} color={colors.text.hint} />
       </TouchableOpacity>
     </View>
   );