添加暗色模式监听

Author: Luozf12345

tdesign-component/example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
@@ -12,6 +13,9 @@ import 'l10n/app_localizations.dart';
 import 'provider/locale_provider.dart';
 import 'provider/theme_mode_provider.dart';
 
+// 仅在 Web 平台导入
+import 'dart:html' as html if (dart.library.html) 'dart:html';
+
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
@@ -82,6 +86,13 @@ class _MyAppState extends State<MyApp> {
       ],
       child: Consumer2<ThemeModeProvider, LocaleProvider>(
         builder: (context, themeModeProvider, localeProvider, child) {
+          // 在 Web 平台设置 postMessage 监听
+          if (PlatformUtil.isWeb) {
+            WidgetsBinding.instance.addPostFrameCallback((_) {
+              _setupThemeModeListener(context, themeModeProvider);
+            });
+          }
+
           return MaterialApp(
             title: 'TDesign Flutter Example',
             theme: _themeData.systemThemeDataLight,
@@ -129,4 +140,33 @@ class _MyAppState extends State<MyApp> {
       return const {};
     }
   }
+
+  static bool _listenerSetup = false;
+
+  void _setupThemeModeListener(
+      BuildContext context, ThemeModeProvider themeModeProvider) {
+    // 只设置一次监听器
+    if (_listenerSetup) return;
+    _listenerSetup = true;
+
+    // 仅在 Web 平台执行
+    if (!PlatformUtil.isWeb) return;
+
+    // ignore: undefined_prefixed_name, avoid_web_libraries_in_flutter
+    if (kIsWeb) {
+      html.window.onMessage.listen((event) {
+        if (event.data is Map) {
+          final data = event.data as Map;
+          if (data['type'] == 'theme-mode-change') {
+            final themeMode = data['themeMode'] as String?;
+            if (themeMode == 'dark') {
+              themeModeProvider.themeMode = ThemeMode.dark;
+            } else if (themeMode == 'light') {
+              themeModeProvider.themeMode = ThemeMode.light;
+            }
+          }
+        }
+      });
+    }
+  }
 }

tdesign-site/site/plugin-tdoc/component.vue

@@ -7,6 +7,7 @@
         <div name="DEMO" v-html="info.demoMd"></div>
         <td-doc-phone headless>
           <iframe
+            ref="demoIframe"
             :src="liveUrl"
             frameborder="0"
             width="100%"
@@ -73,7 +74,7 @@ export default defineComponent({
 
   mounted() {
     const { info } = this;
-    const { tdDocContent, tdDocHeader, tdDocTabs } = this.$refs;
+    const { tdDocContent, tdDocHeader, tdDocTabs, demoIframe } = this.$refs;
 
     if (info.isComponent) {
       tdDocTabs.onchange = ({ detail: currentTab }) => (this.tab = currentTab);
@@ -86,6 +87,81 @@ export default defineComponent({
     this.$emit('loaded', () => {
       tdDocContent.pageStatus = 'show';
     });
+
+    // 监听暗色模式变化并通知 iframe
+    if (demoIframe) {
+      this.setupThemeModeListener(demoIframe);
+    }
+  },
+
+  beforeUnmount() {
+    // 清理监听器
+    const observer = (this as any).themeObserver;
+    if (observer) {
+      observer.disconnect();
+      (this as any).themeObserver = null;
+    }
+  },
+
+  data() {
+    return {
+      themeObserver: null as MutationObserver | null,
+    };
+  },
+
+  methods: {
+    setupThemeModeListener(iframe: HTMLIFrameElement) {
+      // 获取当前主题模式
+      const getThemeMode = () => {
+        const root = document.documentElement;
+        return root.getAttribute('theme-mode') === 'dark' ? 'dark' : 'light';
+      };
+
+      // 发送主题模式到 iframe
+      const sendThemeMode = () => {
+        if (iframe && iframe.contentWindow) {
+          const themeMode = getThemeMode();
+          iframe.contentWindow.postMessage(
+            {
+              type: 'theme-mode-change',
+              themeMode: themeMode,
+            },
+            '*'
+          );
+        }
+      };
+
+      // 初始发送一次
+      iframe.addEventListener('load', () => {
+        sendThemeMode();
+      });
+
+      // 如果 iframe 已经加载，立即发送
+      if (iframe.contentWindow) {
+        sendThemeMode();
+      }
+
+      // 使用 MutationObserver 监听根元素的 theme-mode 属性变化
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (
+            mutation.type === 'attributes' &&
+            mutation.attributeName === 'theme-mode'
+          ) {
+            sendThemeMode();
+          }
+        });
+      });
+
+      // 保存 observer 引用以便清理
+      (this as any).themeObserver = observer;
+
+      // 开始观察根元素的属性变化
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['theme-mode'],
+      });
+    },
   },
 });
 </script>