Skip to content

Commit f975b79

Browse files
runoob-coderrunoob-coder
committed
docs(dark-mode): 更新深色模式文档链接和代码示例
- 更新深色模式切换代码示例链接至实际文件路径 - 调整JSON配置代码块格式，统一缩进为两个空格 - 优化MaterialApp主题配置代码注释排版 - 修复themeMode属性重复声明的语法错误
1 parent cee9ecb commit f975b79

1 file changed

Lines changed: 78 additions & 78 deletions

File tree

‎tdesign-site/site/docs/dark-mode.md‎

Lines changed: 78 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ spline: explain
1313

1414
## 使用之前
1515

16-
使用之前，请先阅读 flutter 官方文档：[使用 Themes 统一颜色和字体风格](https://docs.flutter.cn/cookbook/design/themes)。
16+
使用之前，请先阅读 flutter 官方文档：[使用 Themes 统一颜色和字体风格](https://docs.flutter.cn/cookbook/design/themes/)。
1717

1818
TDFlutter 的深色模式是基于上述 flutter 官方文档对 [ThemeData](https://api.flutter-io.cn/flutter/material/ThemeData-class.html) 进行自定义配置和重载主题实现的。
1919

20-
具体代码请参考 [深色模式切换](https://github.com/Tencent/tdesign-flutter/pull/768/commits/c5bf979a4b54c119e196ced2f6006deb69339fde)。
20+
具体代码请参考 [深色模式切换](https://github.com/Tencent/tdesign-flutter/blob/develop/tdesign-component/example/lib/component_test/dark_test.dart)。
2121

2222
## 主题配置
2323

@@ -30,60 +30,60 @@ TDFlutter 的深色模式是基于上述 flutter 官方文档对 [ThemeData](htt
3030
```json
3131
{
3232
"defaultDark": {
33-
"ref": {
34-
"brandNormalColor": "brandColor8",
35-
"warningNormalColor": "warningColor5",
36-
"errorNormalColor": "errorColor6",
37-
"successNormalColor": "successColor5",
38-
"brandFocusColor": "brandColor1",
39-
"brandActiveColor": "brandColor9",
40-
"brandDisabledColor": "brandColor3",
41-
"brandLightColor": "brandColor1",
42-
"brandColorLightActive": "brandColor2",
43-
"warningFocusColor": "warningColor2",
44-
"warningActiveColor": "warningColor4",
45-
"warningDisabledColor": "warningColor3",
46-
"warningLightColor": "warningColor1",
47-
"warningColorLightActive": "warningColor2",
48-
"errorFocusColor": "errorColor2",
49-
"errorActiveColor": "errorColor5",
50-
"errorDisabledColor": "errorColor3",
51-
"errorLightColor": "errorColor1",
52-
"errorColorLightActive": "errorColor2",
53-
"successFocusColor": "successColor2",
54-
"successActiveColor": "successColor4",
55-
"successDisabledColor": "successColor3",
56-
"successLightColor": "successColor1",
57-
"successColorLightActive": "successColor2",
58-
"bgColorPage": "grayColor14",
59-
"bgColorContainer": "grayColor13",
60-
"bgColorSecondaryContainer": "grayColor12",
61-
"bgColorComponent": "grayColor11",
62-
"bgColorContainerActive": "grayColor12",
63-
"bgColorSecondaryContainerActive": "grayColor11",
64-
"bgColorComponentActive": "grayColor10",
65-
"bgColorComponentDisabled": "grayColor12",
66-
"textColorPrimary": "fontWhColor1",
67-
"textColorSecondary": "fontWhColor2",
68-
"textColorPlaceholder": "fontWhColor3",
69-
"textDisabledColor": "fontWhColor4",
70-
"textColorAnti": "fontWhColor1",
71-
"textColorBrand": "brandColor8",
72-
"textColorLink": "brandColor8",
73-
"componentStrokeColor": "grayColor11",
74-
"componentBorderColor": "grayColor9"
75-
},
76-
"color": {
77-
"brandColor1": "#1b2f51",
78-
"brandColor2": "#173463",
79-
"brandColor3": "#143975",
80-
"brandColor4": "#103d88",
81-
"brandColor5": "#0d429a",
82-
"brandColor6": "#054bbe",
83-
"brandColor7": "#2667d4",
84-
"brandColor8": "#4582e6",
85-
"brandColor9": "#699ef5",
86-
"brandColor10": "#96bbf8"
33+
"ref": {
34+
"brandNormalColor": "brandColor8",
35+
"warningNormalColor": "warningColor5",
36+
"errorNormalColor": "errorColor6",
37+
"successNormalColor": "successColor5",
38+
"brandFocusColor": "brandColor1",
39+
"brandActiveColor": "brandColor9",
40+
"brandDisabledColor": "brandColor3",
41+
"brandLightColor": "brandColor1",
42+
"brandColorLightActive": "brandColor2",
43+
"warningFocusColor": "warningColor2",
44+
"warningActiveColor": "warningColor4",
45+
"warningDisabledColor": "warningColor3",
46+
"warningLightColor": "warningColor1",
47+
"warningColorLightActive": "warningColor2",
48+
"errorFocusColor": "errorColor2",
49+
"errorActiveColor": "errorColor5",
50+
"errorDisabledColor": "errorColor3",
51+
"errorLightColor": "errorColor1",
52+
"errorColorLightActive": "errorColor2",
53+
"successFocusColor": "successColor2",
54+
"successActiveColor": "successColor4",
55+
"successDisabledColor": "successColor3",
56+
"successLightColor": "successColor1",
57+
"successColorLightActive": "successColor2",
58+
"bgColorPage": "grayColor14",
59+
"bgColorContainer": "grayColor13",
60+
"bgColorSecondaryContainer": "grayColor12",
61+
"bgColorComponent": "grayColor11",
62+
"bgColorContainerActive": "grayColor12",
63+
"bgColorSecondaryContainerActive": "grayColor11",
64+
"bgColorComponentActive": "grayColor10",
65+
"bgColorComponentDisabled": "grayColor12",
66+
"textColorPrimary": "fontWhColor1",
67+
"textColorSecondary": "fontWhColor2",
68+
"textColorPlaceholder": "fontWhColor3",
69+
"textDisabledColor": "fontWhColor4",
70+
"textColorAnti": "fontWhColor1",
71+
"textColorBrand": "brandColor8",
72+
"textColorLink": "brandColor8",
73+
"componentStrokeColor": "grayColor11",
74+
"componentBorderColor": "grayColor9"
75+
},
76+
"color": {
77+
"brandColor1": "#1b2f51",
78+
"brandColor2": "#173463",
79+
"brandColor3": "#143975",
80+
"brandColor4": "#103d88",
81+
"brandColor5": "#0d429a",
82+
"brandColor6": "#054bbe",
83+
"brandColor7": "#2667d4",
84+
"brandColor8": "#4582e6",
85+
"brandColor9": "#699ef5",
86+
"brandColor10": "#96bbf8"
8787
}
8888
}
8989
}
@@ -119,29 +119,29 @@ class App extends StatelessWidget {
119119
120120
@override
121121
Widget build(BuildContext context) {
122-
// MaterialApp中设置theme,darkTheme,themeMode三个属性如下，如果有自定义主题属性，可以通过copyWith()方法修改。
123-
// 注：主题切换需要业务自己实现，比如使用Provider,具体可参考tdesign-flutter/tdesign-component/example/lib/component_test/dark_test.dart
124-
return MaterialApp(
125-
title: '深色模式切换测试',
126-
127-
/// 默认浅色模式
128-
theme: themeData.systemThemeDataLight!.copyWith(
129-
/// 根据自己的需求用 TD 颜色覆盖 Material/Cupertino 的颜色
130-
cupertinoOverrideTheme: const CupertinoThemeData().copyWith(
131-
barBackgroundColor: themeData.bgColorContainer.withOpacity(0.5),
132-
),
133-
/// ... 更多重载主题
134-
),
122+
// MaterialApp中设置theme,darkTheme,themeMode三个属性如下，如果有自定义主题属性，可以通过copyWith()方法修改。
123+
// 注：主题切换需要业务自己实现，比如使用Provider,具体可参考tdesign-flutter/tdesign-component/example/lib/component_test/dark_test.dart
124+
return MaterialApp(
125+
title: '深色模式切换测试',
126+
127+
/// 默认浅色模式
128+
theme: themeData.systemThemeDataLight!.copyWith(
129+
/// 根据自己的需求用 TD 颜色覆盖 Material/Cupertino 的颜色
130+
cupertinoOverrideTheme: const CupertinoThemeData().copyWith(
131+
barBackgroundColor: themeData.bgColorContainer.withOpacity(0.5),
132+
),
133+
/// ... 更多重载主题
134+
),
135135
136-
/// 深色模式
137-
darkTheme: themeData.systemThemeDataDark?.copyWith(
138-
cupertinoOverrideTheme: const CupertinoThemeData().copyWith(
139-
barBackgroundColor: themeData.dark?.grayColor13.withOpacity(0.5),
140-
),
136+
/// 深色模式
137+
darkTheme: themeData.systemThemeDataDark?.copyWith(
138+
cupertinoOverrideTheme: const CupertinoThemeData().copyWith(
139+
barBackgroundColor: themeData.dark?.grayColor13.withOpacity(0.5),
140+
),
141141
142-
/// ... 更多重载主题
143-
),
144-
themeMode: themeModeProvider.themeMode,
142+
/// ... 更多重载主题
143+
),
144+
themeMode: themeModeProvider.themeMode,
145145
);
146146
}
147147
}
@@ -161,7 +161,7 @@ return MaterialApp(
161161
// 深色模式（已忽略细节）
162162
darkTheme: _themeData.systemThemeDataDark,
163163
// MaterialApp 主题模式默认跟随系统
164-
themeMode: themeMode: ThemeMode.system,
164+
themeMode: ThemeMode.system,
165165
);
166166
```
167167

0 commit comments

Comments
 (0)