[fix] systhem change

src/logic/content/twitter.js

@@ -615,7 +615,7 @@ function addSliderNavDeBtn(isSmall = false) {
 
 function onWindowResize() {
     window.onresize = throttle(function () {
-        setTabGroupIframeStyle();
+        setTabGroupIframeStyle({}, true);
         try {
             if (tweetPublishStore.showPublishDialog) {
                 let dialog = document.querySelector('div[role="dialog"]');
@@ -1970,7 +1970,12 @@ export const groupTipsSelectGroupTab = (params = {}) => {
 const addGroupTabEventListener = () => {
     let groupTab = getGroupTabNode();
     groupTab.addEventListener('click', function () {
-        let groupColor = systemInfo.theme == 'light' ? 'rgb(15, 20, 25)' : '#fff';
+        let bgColor = document.querySelector('body').style.backgroundColor;
+
+        let groupColor = systemInfo.theme == 'dark' && bgColor == 'rgb(0, 0, 0)' ? '#fff' : 'rgb(15, 20, 25)';
+
+        // let groupColor = systemInfo.theme == 'light' ? 'rgb(15, 20, 25)' : '#fff';
+
         setGroupTabSelfStyle({
             groupColor: groupColor,
             groupFontWeight: '700',
@@ -2255,7 +2260,10 @@ const fixProfileTabAutoSwitch = () => {
  * 
  * 设置Tab Group Iframe 样式
  */
-export const setTabGroupIframeStyle = (params) => {
+export const setTabGroupIframeStyle = (params, isReSize = false) => {
+    if(!isReSize) {
+        getSysTheme();
+    }
     let iframeContent = getGroupTabContentNode();
     if (iframeContent) {
         let htmlHeight = document.querySelector('html').offsetHeight;
@@ -2329,6 +2337,7 @@ const getSysTheme = () => {
     } else {
         systemInfo.theme = 'dark'
     }
+    sysThemeChange();
     themeMedia.addListener(e => {
         addGroupTab()
         if (e.matches) {
@@ -2336,9 +2345,20 @@ const getSysTheme = () => {
         } else {
             systemInfo.theme = 'dark'
         }
+        sysThemeChange();
     });
 }
 
+const sysThemeChange = () => {
+    setTimeout(() => {
+        let bgColor = document.querySelector('body').style.backgroundColor;
+        
+        chrome.runtime.sendMessage({ actionType: "CONTENT_SYS_THEME_CHANGE", data: {
+            theme: systemInfo.theme,
+            twitterTheme: bgColor == 'rgb(0, 0, 0)' ? 'dark' : 'light'
+        } }, () => { })
+    }, 800)
+}
 
 /** 
  * 

src/view/iframe/tab-group/tab-group.vue

@@ -41,14 +41,24 @@
                                     </template>
                                 </el-popover>
                             </div>
-                            <div class="nick-name">
+                            <div class="nick-name"
+                                :style="{
+                                    color: eleThemeStyle.color
+                                }">
                                 {{item.nickName}}
                             </div>
-                            <div class="screen-name">
+                            <div class="screen-name"
+                                :style="{
+                                    color: eleThemeStyle.screenName
+                                }">
                                 @{{item.screenName}}
                             </div>
                         </div>
-                        <div class="post-content" v-html="item.textContent"></div>
+                        <div class="post-content"
+                            :style="{
+                                color: eleThemeStyle.color
+                            }"
+                            v-html="item.textContent"></div>
                     </div>
                 </div>
             </template>
@@ -61,7 +71,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { getGroupPostList, getTwitterNftGroupInfo } from '@/http/nft'
 import { getQueryString } from '@/uilts/help.js'
 import { ElPopover } from "element-plus";
@@ -75,6 +85,12 @@ let listWrapperDom = ref(null);
 let pageWrapperDom = ref(null);
 let loading = ref(false);
 
+let eleThemeStyle = reactive({
+    color: '#000',
+    screenName: '#566370',
+    borderColor: '#F0F3F4',
+})
+
 let listReqParams = {
     params: {
         pageSize: 100,
@@ -110,6 +126,9 @@ function onRuntimeMsg() {
             case 'CONTENT_SEND_GROUP_NAV_TOP':
                 styleHandler(req.data);
                 break;
+            case 'CONTENT_SYS_THEME_CHANGE':
+                checkPageThemeStyle(req.data);
+                break;
         }
     })
 }
@@ -234,6 +253,22 @@ const initData = () => {
     }
 }
 
+const checkPageThemeStyle = (params) => {
+    let {twitterTheme, theme} = params;
+
+    if(twitterTheme == 'light') {
+        eleThemeStyle.color = '#000';
+        eleThemeStyle.screenName = '#566370';
+        eleThemeStyle.borderColor = '#F0F3F4';
+        document.querySelector('body').style.backgroundColor = '#fff'
+    } else if (twitterTheme == 'dark'){
+        eleThemeStyle.color = '#fff';
+        eleThemeStyle.screenName = '#fff';
+        eleThemeStyle.borderColor = '#000';
+        document.querySelector('body').style.backgroundColor = '#000'
+    }
+};
+
 onMounted(() => {
     onRuntimeMsg();
     initData();
@@ -259,28 +294,31 @@ html, body, #app {
     display: none !important;
 }
 
-@media (prefers-color-scheme: light) {
-    body {
-        background: #fff;
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .list-item {
-        border-bottom: 1px solid #000 !important;
-    }
-    .nick-name {
-        color: #fff !important;
-    }
-
-    .screen-name {
-        color: #fff !important;
-    }
-
-    .post-content {
-        color: #fff !important;
-    }
-}
+// @media (prefers-color-scheme: light) {
+//     body {
+//         background: #fff;
+//     }
+// }
+
+// @media (prefers-color-scheme: dark) {
+//     body {
+//         background: #000 !important;
+//     }
+//     .list-item {
+//         border-bottom: 1px solid #000 !important;
+//     }
+//     .nick-name {
+//         color: #fff !important;
+//     }
+
+//     .screen-name {
+//         color: #fff !important;
+//     }
+
+//     .post-content {
+//         color: #fff !important;
+//     }
+// }
 
 .preview-nft {
     box-sizing: border-box;
@@ -399,7 +437,7 @@ html, body, #app {
                     font-weight: 400;
                     font-size: 16px;
                     line-height: 24px;
-                    color: rgb(15, 20, 25);
+                    color: #000;
                     font-family: TwitterChirp, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
                     word-break: break-all;
                     white-space: pre-line;