File tree Expand file tree Collapse file tree 1 file changed +60
-0
lines changed
Expand file tree Collapse file tree 1 file changed +60
-0
lines changed Original file line number Diff line number Diff line change 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+ 但即使是这些情况,也要考虑在不同主题下的对比度和可读性。
You can’t perform that action at this time.
0 commit comments