feat(Theme): enhance theming and UI consistency across components

- Updated app.json to set userInterfaceStyle to automatic for improved theme adaptability.
- Refactored layout components to utilize useAppColors for dynamic theming, ensuring consistent color usage.
- Introduced SystemChrome component to manage system UI background color based on theme.
- Enhanced TabsLayout, ProfileStackLayout, and other components to leverage new theming structure.
- Improved QRCodeScanner, SearchBar, and CommentItem styles to align with the updated theme system.
- Consolidated styles in SystemMessageItem and TabBar for better maintainability and visual coherence.

src/app-navigation/AppDesktopShell.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   View,
   StyleSheet,
@@ -11,7 +11,7 @@ import { useSafeAreaInsets, SafeAreaView } from 'react-native-safe-area-context'
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { usePathname, useRouter } from 'expo-router';
 
-import { colors, shadows } from '../theme';
+import { useAppColors, shadows, type AppColors } from '../theme';
 import { useTotalUnreadCount } from '../stores';
 import { AppRouteStack } from './AppRouteStack';
 
@@ -36,7 +36,114 @@ function pathToTab(pathname: string): TabName {
   return 'HomeTab';
 }
 
+function createDesktopShellStyles(colors: AppColors) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      flexDirection: 'row',
+      backgroundColor: colors.background.default,
+    },
+    sidebar: {
+      backgroundColor: colors.background.paper,
+      borderRightWidth: 1,
+      borderRightColor: colors.divider,
+      flexDirection: 'column',
+      ...shadows.md,
+    },
+    sidebarHeader: {
+      paddingHorizontal: 16,
+      paddingVertical: 20,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.divider,
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+    },
+    logoText: {
+      fontSize: 18,
+      fontWeight: '700',
+      color: colors.primary.main,
+      marginLeft: 8,
+    },
+    sidebarContent: {
+      flex: 1,
+      paddingTop: 8,
+    },
+    sidebarItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      marginHorizontal: 8,
+      marginVertical: 4,
+      borderRadius: 12,
+    },
+    sidebarItemActive: {
+      backgroundColor: `${colors.primary.main}15`,
+    },
+    sidebarItemCollapsed: {
+      justifyContent: 'center',
+      paddingHorizontal: 0,
+    },
+    sidebarIconContainer: {
+      position: 'relative',
+      width: 40,
+      height: 40,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 12,
+    },
+    sidebarLabel: {
+      fontSize: 15,
+      fontWeight: '500',
+      color: colors.text.secondary,
+      marginLeft: 12,
+      flex: 1,
+    },
+    sidebarLabelActive: {
+      color: colors.primary.main,
+      fontWeight: '600',
+    },
+    collapseButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      paddingHorizontal: 16,
+      paddingVertical: 12,
+      borderTopWidth: 1,
+      borderTopColor: colors.divider,
+    },
+    collapseButtonCollapsed: {
+      justifyContent: 'center',
+      paddingHorizontal: 0,
+    },
+    badge: {
+      position: 'absolute',
+      top: 2,
+      right: 2,
+      backgroundColor: colors.error.main,
+      borderRadius: 10,
+      minWidth: 18,
+      height: 18,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 4,
+    },
+    badgeText: {
+      color: colors.primary.contrast,
+      fontSize: 10,
+      fontWeight: '600',
+    },
+    mainContent: {
+      flex: 1,
+      backgroundColor: colors.background.default,
+    },
+  });
+}
+
 export function AppDesktopShell() {
+  const colors = useAppColors();
+  const styles = useMemo(() => createDesktopShellStyles(colors), [colors]);
   const insets = useSafeAreaInsets();
   const router = useRouter();
   const pathname = usePathname();
@@ -134,106 +241,3 @@ export function AppDesktopShell() {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: colors.background.default,
-  },
-  sidebar: {
-    backgroundColor: colors.background.paper,
-    borderRightWidth: 1,
-    borderRightColor: colors.divider,
-    flexDirection: 'column',
-    ...shadows.md,
-  },
-  sidebarHeader: {
-    paddingHorizontal: 16,
-    paddingVertical: 20,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.divider,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexDirection: 'row',
-  },
-  logoText: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: colors.primary.main,
-    marginLeft: 8,
-  },
-  sidebarContent: {
-    flex: 1,
-    paddingTop: 8,
-  },
-  sidebarItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    marginHorizontal: 8,
-    marginVertical: 4,
-    borderRadius: 12,
-  },
-  sidebarItemActive: {
-    backgroundColor: `${colors.primary.main}15`,
-  },
-  sidebarItemCollapsed: {
-    justifyContent: 'center',
-    paddingHorizontal: 0,
-  },
-  sidebarIconContainer: {
-    position: 'relative',
-    width: 40,
-    height: 40,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 12,
-  },
-  sidebarLabel: {
-    fontSize: 15,
-    fontWeight: '500',
-    color: colors.text.secondary,
-    marginLeft: 12,
-    flex: 1,
-  },
-  sidebarLabelActive: {
-    color: colors.primary.main,
-    fontWeight: '600',
-  },
-  collapseButton: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderTopWidth: 1,
-    borderTopColor: colors.divider,
-  },
-  collapseButtonCollapsed: {
-    justifyContent: 'center',
-    paddingHorizontal: 0,
-  },
-  badge: {
-    position: 'absolute',
-    top: 2,
-    right: 2,
-    backgroundColor: colors.error.main,
-    borderRadius: 10,
-    minWidth: 18,
-    height: 18,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 4,
-  },
-  badgeText: {
-    color: colors.primary.contrast,
-    fontSize: 10,
-    fontWeight: '600',
-  },
-  mainContent: {
-    flex: 1,
-    backgroundColor: colors.background.default,
-  },
-});