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/theme/index.ts

@@ -1,183 +1,28 @@
 /**
- * 胡萝卜BBS主题系统
- * 基于胡萝卜橙主色调的设计系统
+ * 胡萝卜BBS 主题：明暗色板、Paper 主题、设计 token
+ * 新代码请优先使用 useAppColors()；静态 colors 为浅色快照，与深色模式不同步。
  */
 
-// ==================== 颜色系统 ====================
-export const colors = {
-  primary: {
-    main: '#FF6B35',      // 橙色（主色）
-    light: '#FFB733',
-    dark: '#CC8400',
-    contrast: '#FFFFFF',
-  },
-  secondary: {
-    main: '#4CAF50',
-    light: '#80E27E',
-    dark: '#087F23',
-  },
-  neutral: {
-    main: '#6B7280',      // 中性灰（辅助色）
-    light: '#9CA3AF',
-    dark: '#374151',
-    bg: '#F3F4F6',        // 浅灰背景
-    bgDark: '#1F2937',    // 深灰背景
-  },
-  accent: {
-    main: '#E57373',      // 低饱和红（点缀色）
-    light: '#FFCDD2',
-    dark: '#C62828',
-  },
-  background: {
-    default: '#F5F5F5',
-    paper: '#FFFFFF',
-    disabled: '#E0E0E0',
-  },
-  text: {
-    primary: '#212121',
-    secondary: '#757575',
-    disabled: '#9E9E9E',
-    hint: '#BDBDBD',
-    inverse: '#FFFFFF',
-  },
-  divider: '#E0E0E0',
-  error: {
-    main: '#F44336',
-    light: '#FF7961',
-    dark: '#D32F2F',
-  },
-  success: {
-    main: '#4CAF50',
-    light: '#80E27E',
-    dark: '#087F23',
-  },
-  warning: {
-    main: '#FF9800',
-    light: '#FFB74D',
-    dark: '#F57C00',
-  },
-  info: {
-    main: '#2196F3',
-    light: '#64B5F6',
-    dark: '#1976D2',
-  },
-};
+export { lightColors, darkColors, type AppColors } from './palettes';
+export { buildPaperTheme } from './paperTheme';
+export * from './tokens';
 
-// ==================== 字体系统 ====================
-export const fontSizes = {
-  xs: 10,
-  sm: 12,
-  md: 14,
-  lg: 16,
-  xl: 18,
-  '2xl': 20,
-  '3xl': 24,
-  '4xl': 30,
-};
+export {
+  useAppColors,
+  useThemePreference,
+  useResolvedColorScheme,
+  useSetThemePreference,
+  usePaperThemeFromStore,
+  ThemeBootstrap,
+  useThemeStore,
+  type ThemePreference,
+  type ResolvedScheme,
+} from '../stores/themeStore';
 
-// ==================== 间距系统（4px基准）====================
-export const spacing = {
-  xs: 4,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 20,
-  '2xl': 24,
-  '3xl': 32,
-  '4xl': 40,
-  '5xl': 48,
-  '6xl': 56,
-};
+import { lightColors } from './palettes';
+import { buildPaperTheme } from './paperTheme';
 
-// ==================== 圆角系统 ====================
-export const borderRadius = {
-  sm: 4,
-  md: 8,
-  lg: 12,
-  xl: 16,
-  '2xl': 24,
-  full: 9999,
-};
+/** 浅色静态快照；随主题切换请使用 useAppColors() */
+export const colors = lightColors;
 
-// ==================== 阴影系统 ====================
-export const shadows = {
-  sm: { 
-    shadowColor: '#000', 
-    shadowOffset: { width: 0, height: 1 }, 
-    shadowOpacity: 0.18, 
-    shadowRadius: 1.0, 
-    elevation: 1 
-  },
-  md: { 
-    shadowColor: '#000', 
-    shadowOffset: { width: 0, height: 2 }, 
-    shadowOpacity: 0.22, 
-    shadowRadius: 2.22, 
-    elevation: 3 
-  },
-  lg: { 
-    shadowColor: '#000', 
-    shadowOffset: { width: 0, height: 4 }, 
-    shadowOpacity: 0.3, 
-    shadowRadius: 4.65, 
-    elevation: 6 
-  },
-};
-
-// ==================== 导出主题对象 ====================
-export const theme = { 
-  colors, 
-  fontSizes, 
-  spacing, 
-  borderRadius, 
-  shadows 
-};
-
-export type Theme = typeof theme;
-
-// ==================== 主题配置（用于React Native Paper）====================
-export const paperTheme = {
-  colors: {
-    primary: colors.primary.main,
-    primaryContainer: colors.primary.light,
-    secondary: colors.secondary.main,
-    secondaryContainer: colors.secondary.light,
-    tertiary: colors.info.main,
-    tertiaryContainer: colors.info.light,
-    surface: colors.background.paper,
-    surfaceVariant: colors.background.default,
-    surfaceDisabled: colors.background.disabled,
-    background: colors.background.default,
-    error: colors.error.main,
-    errorContainer: colors.error.light,
-    onPrimary: colors.primary.contrast,
-    onPrimaryContainer: colors.primary.dark,
-    onSecondary: colors.text.inverse,
-    onSecondaryContainer: colors.secondary.dark,
-    onTertiary: colors.text.inverse,
-    onTertiaryContainer: colors.info.dark,
-    onSurface: colors.text.primary,
-    onSurfaceVariant: colors.text.secondary,
-    onSurfaceDisabled: colors.text.disabled,
-    onError: colors.text.inverse,
-    onErrorContainer: colors.error.dark,
-    onBackground: colors.text.primary,
-    outline: colors.divider,
-    outlineVariant: colors.divider,
-    inverseSurface: colors.text.primary,
-    inverseOnSurface: colors.text.inverse,
-    inversePrimary: colors.primary.light,
-    shadow: '#000000',
-    scrim: '#000000',
-    backdrop: 'rgba(0, 0, 0, 0.5)',
-    elevation: {
-      level0: 'transparent',
-      level1: colors.background.paper,
-      level2: colors.background.paper,
-      level3: colors.background.paper,
-      level4: colors.background.paper,
-      level5: colors.background.paper,
-    },
-  },
-  roundness: borderRadius.md,
-};
+export const paperTheme = buildPaperTheme(lightColors, false);