@@ -23,77 +23,67 @@ TDFlutter 的深色模式是基于上述 flutter 官方文档对 [ThemeData](htt
2323
2424本示例中我们要配置两套主题，浅色和深色。（你也可以根据自己的业务需求，配置更多主题）
2525
26- 具体请参考 [ 自定义主题] ( ./ getting-started#自定义主题 ) 。
26+ 具体请参考 [ 自定义主题] ( https://tdesign.tencent.com/flutter/ getting-started#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98 ) 。
2727
2828### 深色主题配置
2929
3030``` jsonc
3131{
32- " darkTheme" : {
33- // 重点在于 ref 配置
34- " ref" : {
35- " brandLightColor" : " brandColor1"
36- " brandFocusColor" : " brandColor1"
37- " brandDisabledColor" : " brandColor3"
38- " brandHoverColor" : " brandColor5"
39- " brandNormalColor" : " brandColor8"
40- " brandActiveColor" : " brandColor2"
41- " warningNormalColor" : " warningColor5"
42- " warningHoverColor" : " warningColor4"
43- " warningFocusColor" : " warningColor2"
44- " warningActiveColor" : " warningColor6"
45- " warningDisabledColor" : " warningColor3"
46- " warningLightColor" : " warningColor1"
47- " errorNormalColor" : " errorColor6"
48- " errorHoverColor" : " errorColor5"
49- " errorFocusColor" : " errorColor2"
50- " errorActiveColor" : " errorColor7"
51- " errorDisabledColor" : " errorColor3"
52- " errorLightColor" : " errorColor1"
53- " successNormalColor" : " successColor5"
54- " successHoverColor" : " successColor4"
55- " successFocusColor" : " successColor2"
56- " successActiveColor" : " successColor6"
57- " successDisabledColor" : " successColor3"
58- " successLightColor" : " successColor1"
59- " brandColorLightHover" : " brandColor2"
60- " warningColorLightHover" : " warningColor2"
61- " errorColorLightHover" : " errorColor2"
62- " successColorLightHover" : " successColor2"
63- " bgColorPage" : " grayColor14"
64- " bgColorContainer" : " grayColor13"
65- " bgColorContainerHover" : " grayColor12"
66- " bgColorContainerActive" : " grayColor10"
67- " bgColorContainerSelect" : " grayColor9"
68- " bgColorSecondaryContainer" : " grayColor12"
69- " bgColorSecondaryContainerHover" : " grayColor11"
70- " bgColorSecondaryContainerActive" : " grayColor9"
71- " bgColorComponent" : " grayColor11"
72- " bgColorComponentHover" : " grayColor10"
73- " bgColorComponentActive" : " grayColor9"
74- " bgColorComponentDisabled" : " grayColor12"
75- " componentStrokeColor" : " grayColor11"
76- " componentBorderColor" : " grayColor9"
77- " textColorPrimary" : " fontWhColor1"
78- " textColorSecondary" : " fontWhColor2"
79- " textColorPlaceholder" : " fontWhColor3"
80- " textColorDisabled" : " fontWhColor4"
81- " textColorAnti" : " fontWhColor1"
82- " textColorBrand" : " brandColor8"
83- " textColorLink" : " brandColor8"
84- },
85- // 自己定义的颜色配置
86- " color" : {
87- " brandColor1" : " #20d3a15c"
88- " brandColor2" : " #4a2d00"
89- " brandColor3" : " #6b4606"
90- " brandColor4" : " #8e6425"
91- " brandColor5" : " #b78846"
92- " brandColor6" : " #d3a15c"
93- " brandColor7" : " #efba73"
94- " brandColor8" : " #ffd192"
95- " brandColor9" : " #ffe6c7"
96- " brandColor10" : " #fff5ea"
32+ " 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"
9787 }
9888 }
9989}
@@ -111,14 +101,11 @@ Future<void> main() async {
111101 WidgetsFlutterBinding.ensureInitialized();
112102
113103 var themeJsonString = await rootBundle.loadString('assets/theme.json');
114- // 开启多套主题功能
104+ /// 开启多套主题功能
115105 TDTheme.needMultiTheme(true);
116- // 默认浅色主题（根据你的主题配置文件选择）
117- themeData = TDThemeData.fromJson('light ', themeJsonString) ??
106+ /// 默认浅色主题,xxxDark为深色主题
107+ themeData = TDThemeData.fromJson('red ', themeJsonString, darkName: 'redDark' ) ??
118108 TDTheme.defaultData();
119- // 深色模式（根据你的主题配置文件选择）
120- darkThemeData = TDThemeData.fromJson('dark', themeJsonString) ??
121- TDThemeData.defaultData(name: 'dark');
122109
123110 runApp(const App());
124111}
@@ -132,52 +119,29 @@ class App extends StatelessWidget {
132119
133120 @override
134121 Widget build(BuildContext context) {
135- return MaterialApp(
136- title: '深色模式切换测试',
137- // 默认浅色模式
138- theme: ThemeData(
139- // 添加 TD 自定义主题配置
140- extensions: [themeData],
141- // 根据自己的需求用 TD 颜色覆盖 Material/Cupertino 的颜色
142- colorScheme: ColorScheme.light(
143- primary: themeData.brandNormalColor,
144- ),
145- scaffoldBackgroundColor: themeData.bgColorPage,
146- iconTheme: const IconThemeData().copyWith(
147- color: themeData.brandNormalColor,
148- ),
149- cupertinoOverrideTheme: const CupertinoThemeData().copyWith(
150- barBackgroundColor: themeData.bgColorContainer.withValues(
151- alpha: 0.5,
152- ),
153- ),
154- // ... 更多重载主题
155- ),
156- // 深色模式
157- darkTheme: ThemeData(
158- // 添加 TD 自定义主题配置
159- extensions: [darkThemeData],
160- // 根据自己的需求用 TD 颜色覆盖 Material/Cupertino 的颜色
161- colorScheme: ColorScheme.dark(
162- primary: darkThemeData.brandNormalColor,
163- secondary: darkThemeData.brandNormalColor,
164- ),
165- scaffoldBackgroundColor: darkThemeData.bgColorPage,
166- bottomNavigationBarTheme: const BottomNavigationBarThemeData()
167- .copyWith(backgroundColor: darkThemeData.grayColor13),
168- appBarTheme: const AppBarTheme().copyWith(
169- backgroundColor: darkThemeData.grayColor13,
170- ),
171- iconTheme: const IconThemeData().copyWith(
172- color: darkThemeData.brandNormalColor,
173- ),
174- cupertinoOverrideTheme: const CupertinoThemeData().copyWith(
175- barBackgroundColor: darkThemeData.grayColor13.withValues(
176- alpha: 0.5,
177- ),
178- ),
179- // ... 更多重载主题
180- ),
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+ ),
135+
136+ /// 深色模式
137+ darkTheme: themeData.systemThemeDataDark?.copyWith(
138+ cupertinoOverrideTheme: const CupertinoThemeData().copyWith(
139+ barBackgroundColor: themeData.dark?.grayColor13.withOpacity(0.5),
140+ ),
141+
142+ /// ... 更多重载主题
143+ ),
144+ themeMode: themeModeProvider.themeMode,
181145 );
182146 }
183147}
@@ -193,9 +157,9 @@ class App extends StatelessWidget {
193157return MaterialApp(
194158 title: '深色模式切换测试',
195159 // 默认浅色模式（已忽略细节）
196- theme: ThemeData(...) ,
160+ theme: _themeData.systemThemeDataLight ,
197161 // 深色模式（已忽略细节）
198- darkTheme: ThemeData(...) ,
162+ darkTheme: _themeData.systemThemeDataDark ,
199163 // MaterialApp 主题模式默认跟随系统
200164 themeMode: themeMode: ThemeMode.system,
201165);
@@ -209,7 +173,7 @@ return MaterialApp(
209173
210174``` yaml
211175 provider : ^6.1.5+1
212- shared_preferences : ^2.5 .3
176+ shared_preferences : ^2.2 .3
213177` ` `
214178
215179你也可以根据自己的业务需求，使用其他状态管理方式。
@@ -279,9 +243,9 @@ class App extends StatelessWidget {
279243 return MaterialApp(
280244 title: '深色模式切换测试',
281245 // 默认浅色模式（已忽略细节）
282- theme: ThemeData(...) ,
246+ theme: _themeData.systemThemeDataLight ,
283247 // 深色模式（已忽略细节）
284- darkTheme: ThemeData(...) ,
248+ darkTheme: _themeData.systemThemeDataDark ,
285249 // 使用状态管理提供的主题模式
286250 themeMode: themeModeProvider.themeMode,
287251 // 主题设置页面
0 commit comments