添加暗色模式相关文档

Author: Luozf12345

tdesign-component/example/lib/component_test/dark_test.dart

@@ -21,7 +21,7 @@ Future<void> main() async {
   /// 开启多套主题功能
   TDTheme.needMultiTheme(true);
   /// 默认浅色主题,dark为深色主题
-  themeData = TDThemeData.fromJson('redLight', themeJsonString, darkName: 'dark') ??
+  themeData = TDThemeData.fromJson('red', themeJsonString, darkName: 'redDark') ??
       TDTheme.defaultData();
 
   runApp(const App());

tdesign-component/lib/src/components/button/td_button.dart

@@ -171,6 +171,13 @@ class _TDButtonState extends State<TDButton> {
     _updateParams();
   }
 
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _updateParams();
+  }
+
+
   @override
   Widget build(BuildContext context) {
     Widget display = Container(

tdesign-component/lib/src/theme/td_theme.dart

@@ -298,9 +298,10 @@ class TDThemeData extends ThemeExtension<TDThemeData> {
       if (themeConfig.containsKey(name)) {
         var theme = parseThemeData(name, themeConfig, extraThemeData);
         theme.light = theme;
-        if (darkName?.isNotEmpty ?? false) {
+        darkName ??= '${name}Dark';
+        if (themeConfig[darkName] != null) {
           // 解析暗色模式
-          var darkTheme = parseThemeData(darkName!, themeConfig, extraThemeData);
+          var darkTheme = parseThemeData(darkName, themeConfig, extraThemeData);
           darkTheme.light = theme;
           theme.dark = darkTheme;
           // 填充暗色模式缺失数据
@@ -340,10 +341,13 @@ class TDThemeData extends ThemeExtension<TDThemeData> {
 
   static TDThemeData parseThemeData(String name, themeConfig, TDExtraThemeData? extraThemeData) {
     var theme = _emptyData(name);
-    Map<String, dynamic> curThemeMap = themeConfig['$name'];
+    Map<String, dynamic>? curThemeMap = themeConfig['$name'];
+    if (curThemeMap?.isEmpty ?? true) {
+      return theme;
+    }
 
     /// 设置颜色
-    Map<String, dynamic>? colorsMap = curThemeMap['color'];
+    Map<String, dynamic>? colorsMap = curThemeMap?['color'];
     colorsMap?.forEach((key, value) {
       var color = toColor(value);
       if (color != null) {
@@ -352,31 +356,31 @@ class TDThemeData extends ThemeExtension<TDThemeData> {
     });
 
     /// 设置颜色
-    Map<String, dynamic>? refMap = curThemeMap['ref'];
+    Map<String, dynamic>? refMap = curThemeMap?['ref'];
     refMap?.forEach((key, value) {
       theme.refMap[key] = value;
     });
 
     /// 设置字体尺寸
-    Map<String, dynamic>? fontsMap = curThemeMap['font'];
+    Map<String, dynamic>? fontsMap = curThemeMap?['font'];
     fontsMap?.forEach((key, value) {
       theme.fontMap[key] = Font.fromJson(value);
     });
 
     /// 设置圆角
-    Map<String, dynamic>? cornersMap = curThemeMap['radius'];
+    Map<String, dynamic>? cornersMap = curThemeMap?['radius'];
     cornersMap?.forEach((key, value) {
       theme.radiusMap[key] = value.toDouble();
     });
 
     /// 设置字体
-    Map<String, dynamic>? fontFamilyMap = curThemeMap['fontFamily'];
+    Map<String, dynamic>? fontFamilyMap = curThemeMap?['fontFamily'];
     fontFamilyMap?.forEach((key, value) {
       theme.fontFamilyMap[key] = FontFamily.fromJson(value);
     });
 
     /// 设置阴影
-    Map<String, dynamic>? shadowMap = curThemeMap['shadow'];
+    Map<String, dynamic>? shadowMap = curThemeMap?['shadow'];
     shadowMap?.forEach((key, value) {
       var list = <BoxShadow>[];
       (value as List).forEach((element) {
@@ -393,12 +397,12 @@ class TDThemeData extends ThemeExtension<TDThemeData> {
     });
 
     /// 设置Margin
-    Map<String, dynamic>? marginsMap = curThemeMap['margin'];
+    Map<String, dynamic>? marginsMap = curThemeMap?['margin'];
     marginsMap?.forEach((key, value) {
       theme.spacerMap[key] = value.toDouble();
     });
 
-    if (extraThemeData != null) {
+    if (extraThemeData != null && curThemeMap != null) {
       extraThemeData.parse(name, curThemeMap);
       theme.extraThemeData = extraThemeData;
     }

tdesign-site/site/docs/getting-started.md

@@ -105,6 +105,24 @@ TDTheme.defaultData().fontBodyLarge
     );
 ```
 
+### 暗色模式
+通过“主题生成器”生成的主题配置文件，默认支持暗色模式相关色值。
+使用方法：
+```dart
+  // 开启多套主题功能
+  TDTheme.needMultiTheme();
+  ……
+  // MaterialApp中设置三个属性如下，如果有自定义主题属性，可以通过copyWith()方法修改。
+  // 注：主题切换需要业务自己试下，比如使用Provider,具体可参考tdesign-flutter/tdesign-component/example/lib/component_test/dark_test.dart
+  MaterialApp(
+  theme: _themeData.systemThemeDataLight,
+  darkTheme: _themeData.systemThemeDataDark,
+  themeMode: themeModeProvider.themeMode,
+  ……
+  )
+
+```
+
 ## 国际化
 
 TD组件库内部不内置国际化语言，但支持与flutter的国际化能力搭配使用。可以继承`TDResourceDelegate`类，该类抽离了组件内部所有文字资源，重新获取文字的方法，进行国际化处理，并通过 `TDTheme.setResourceBuilder` 注入。
@@ -165,7 +183,6 @@ class IntlResourceDelegate extends TDResourceDelegate {
 ## 组件规划
 
 - 新增规划中组件：瀑布流
-- 开发中功能：深色模式
 - 其他事项：API优化、单元测试、多端适配、文本居中优化
 
 ## 基础库版本