---
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 可扩展