Skip to content

Commit 74b90da

Browse files
committed
docs(ui): add comprehensive UI theme specification guide
1 parent e256a9a commit 74b90da

File tree

1 file changed

+60
-0
lines changed

1 file changed

+60
-0
lines changed

.kiro/steering/ui-theme.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# UI 主题规范
2+
3+
## 主题适配要求
4+
5+
所有 UI 的新建或更改都必须考虑主题(深色/浅色)适配。
6+
7+
### 禁止硬编码颜色
8+
9+
**错误示例**
10+
```xml
11+
<Border Background="#2D2D2D">
12+
<TextBlock Foreground="#E0E0E0" Text="示例"/>
13+
</Border>
14+
```
15+
16+
**正确示例**
17+
```xml
18+
<Border Background="{DynamicResource SystemControlBackgroundAltHighBrush}">
19+
<TextBlock Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}" Text="示例"/>
20+
</Border>
21+
```
22+
23+
### 常用主题资源
24+
25+
#### 背景色
26+
- `SystemControlBackgroundAltHighBrush` - 主要背景(卡片、对话框)
27+
- `SystemControlBackgroundBaseLowBrush` - 次要背景
28+
- `CardBackground` - 自定义卡片背景
29+
30+
#### 前景色(文字)
31+
- `SystemControlForegroundBaseHighBrush` - 主要文字
32+
- `SystemControlForegroundBaseMediumBrush` - 次要文字
33+
- `TextPrimary` - 自定义主要文字
34+
- `TextSecondary` - 自定义次要文字
35+
36+
#### 边框
37+
- `SystemControlForegroundBaseLowBrush` - 边框颜色
38+
- `BorderColor` - 自定义边框颜色
39+
40+
#### 强调色
41+
- `PrimaryBrush` - 主要按钮、强调元素
42+
- `DangerColor` - 危险操作按钮
43+
44+
### 检查清单
45+
46+
创建或修改 UI 时,确保:
47+
- [ ] 所有背景色使用动态资源
48+
- [ ] 所有文字颜色使用动态资源
49+
- [ ] 所有边框颜色使用动态资源
50+
- [ ] 在深色和浅色主题下都测试过
51+
- [ ] 对话框、弹窗也要适配主题
52+
53+
### 特殊情况
54+
55+
某些颜色可以硬编码(需要明确理由):
56+
- 品牌色(如主按钮的 `#6C7BFF`
57+
- 二维码背景(必须是白色)
58+
- 特定功能需要的固定颜色
59+
60+
但即使是这些情况,也要考虑在不同主题下的对比度和可读性。

0 commit comments

Comments
 (0)