From 574d7a09147c66d176b0cdcde5f186a0b1240510 Mon Sep 17 00:00:00 2001
From: GuoRuqiang <61670021+guoruqiang@users.noreply.github.com>
Date: Sun, 22 Sep 2024 14:09:03 +0000
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8postMessage=E5=90=91iframe?=
 =?UTF-8?q?=E4=BC=A0=E5=8F=82theme-mode=EF=BC=8C=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=AD=90=E9=A1=B5=E9=9D=A2=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=20=E5=AD=90=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84js=E7=A4=BA=E4=BE=8B=20```=20<script>=20=20=20=20=20//?=
 =?UTF-8?q?=20=E6=8E=A5=E6=94=B6=E7=88=B6=E9=A1=B5=E9=9D=A2=E7=9A=84?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E6=A8=A1=E5=BC=8F=20=20=20=20=20window.addEv?=
 =?UTF-8?q?entListener('message',=20function(event)=20{=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20if=20(event.data.themeMode)=20{=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20var=20theme=20=3D=20event.data.themeMode;=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20//=20=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E6=98=AF=E5=90=A6=E6=AD=A3=E7=A1=AE=E6=8E=A5=E5=8F=97=E5=88=B0?=
 =?UTF-8?q?theme-mode=E7=9A=84=E5=80=BC=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20//=20console.log('Received=20theme=20mode=20from=20parent?=
 =?UTF-8?q?:',=20theme);=20=20=20=20=20=20=20=20=20=20=20=20=20applyTheme(?=
 =?UTF-8?q?theme);=20=20=20=20=20=20=20=20=20}=20=20=20=20=20});?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

    // 定义一个函数来应用主题
    function applyTheme(theme) {
        var body = document.body;
        if (theme === 'dark') {
            body.classList.add("dark-mode");
            document.getElementById("darkModeToggle").checked = true;
        } else {
            body.classList.remove("dark-mode");
            document.getElementById("darkModeToggle").checked = false;
        }
    }
</script>
```
---
 web/src/components/HeaderBar.js | 10 ++++++++--
 web/src/pages/Home/index.js     | 13 +++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js
index b7cf9061..981a34fb 100644
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -118,13 +118,19 @@ const HeaderBar = () => {
   useEffect(() => {
     if (theme === 'dark') {
       document.body.setAttribute('theme-mode', 'dark');
+    } else {
+      document.body.removeAttribute('theme-mode');
+    }
+    // 发送当前主题模式给子页面
+    const iframe = document.querySelector('iframe');
+    if (iframe) {
+      iframe.contentWindow.postMessage({ themeMode: theme }, '*');
     }
 
     if (isNewYear) {
       console.log('Happy New Year!');
     }
-  }, []);
-
+  }, [theme]); // 监听 theme-mode 的变化
   return (
     <>
       <Layout>
diff --git a/web/src/pages/Home/index.js b/web/src/pages/Home/index.js
index 38029528..ad7cba32 100644
--- a/web/src/pages/Home/index.js
+++ b/web/src/pages/Home/index.js
@@ -35,6 +35,19 @@ const Home = () => {
       }
       setHomePageContent(content);
       localStorage.setItem('home_page_content', content);
+
+        // 如果内容是 URL，则发送主题模式
+        if (data.startsWith('https://')) {
+            const iframe = document.querySelector('iframe');
+            if (iframe) {
+                const theme = localStorage.getItem('theme-mode') || 'light';
+                // 测试是否正确传递theme-mode给iframe
+                // console.log('Sending theme-mode to iframe:', theme); 
+                iframe.onload = () => {
+                    iframe.contentWindow.postMessage({ themeMode: theme }, '*');
+                };
+            }
+        }
     } else {
       showError(message);
       setHomePageContent('加载首页内容失败...');