主题系统

项目主题和视觉体系说明。

主题模式

系统支持三种主题模式，通过 src/stores/theme.ts 管理：

模式	说明
浅色（light）	明亮界面
深色（dark）	护眼深色界面
跟随系统（system）	自动跟随设备系统主题

设计变量

核心设计变量定义在 src/styles/design-tokens.scss 和 src/styles/variables.scss 中：

颜色体系

// 品牌色
--color-primary: #4A7DFF;

// 文本色
--color-text-primary: #1F2937;
--color-text-secondary: #6B7280;
--color-text-regular: #4B5563;
--color-text-placeholder: #9CA3AF;

// 背景色
--color-bg-page: #F0F2F5;
--color-bg-card: #fff;
--color-bg-secondary: #E8EBF0;

// 功能色
--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #EF4444;

暗黑模式

暗黑模式通过 .dark 类名切换，覆盖变量定义在 src/styles/vant-dark.scss 中。

关怀模式

关怀模式通过 themeStore.setCareMode() 控制：

• 全局字体放大约 20%
• 按钮和操作区域加大
• 图标尺寸使用 ICON_SIZE_CARE 常量
• 所有组件通过 themeStore.careMode 响应式适配

样式方案

• TailwindCSS：原子化 CSS，用于快速布局
• SCSS：复杂样式、组件级样式
• rpx 单位：移动端适配单位
• CSS 变量：主题切换的核心机制

导航栏

• 默认背景色：#1677FF（蓝色）
• 支持暗黑模式适配
• 毛玻璃效果可选（半透明背景）
• 自定义 NavBar 组件统一样式