a0929de768
- 配置 pnpm workspace monorepo 基础结构 - 初始化 .blueprint/ 蓝图：6 个业务模块、21 张任务卡 - 目标：Z Fold 6 折叠屏不动产物品摸底统计 App（React Native + Expo） Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
31 lines
975 B
Markdown
31 lines
975 B
Markdown
---
|
||
id: theming
|
||
name: 主题与样式系统
|
||
area: frontend
|
||
status: concept
|
||
---
|
||
|
||
## 概述
|
||
|
||
基于 CSS 变量的主题系统，支持亮色/暗色模式切换，结合 Tailwind CSS 或 CSS Modules 实现统一的视觉风格。
|
||
|
||
## 任务卡
|
||
|
||
### 💭 设计 Token 与 CSS 变量
|
||
- status: concept
|
||
- complexity: S
|
||
- files: packages/ui/src/styles/tokens.css
|
||
- acceptance: 定义颜色、间距、字体、圆角等设计 token 为 CSS 变量，dark 模式通过 prefers-color-scheme 或 [data-theme] 切换
|
||
|
||
### 💭 主题切换逻辑
|
||
- status: concept
|
||
- complexity: S
|
||
- files: apps/app-one/src/hooks/useTheme.ts
|
||
- acceptance: 提供 useTheme hook，支持手动切换和跟随系统，偏好持久化到 localStorage
|
||
|
||
### 💭 Tailwind 配置集成
|
||
- status: concept
|
||
- complexity: S
|
||
- files: packages/build-config/tailwind.base.ts, apps/app-one/tailwind.config.ts
|
||
- acceptance: 共享 Tailwind 配置，设计 token 与 Tailwind 主题颜色/间距对齐，各 app 可扩展
|