src/App.tsx

@@ -1,14 +1,27 @@
-import React, { Component, createContext, useContext, useState } from "react";
+import React, { Component, createContext, useContext, useEffect, useState } from "react";
 import "./App.css";
 // import List from "./component/List";
 import Header from './component/hedaer';
 import Bar from './component/bar';
 import Content from './component/content';
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";
+import eventBus from './bus';
 
 const App = () => {
+  const [themeInfo , setInfo] = useState(webLightTheme)
+  useEffect(()=>{
+    const handleCustomEvent = (data:any) => {
+      setInfo(data);
+    };
+
+    eventBus.on('themechange', handleCustomEvent);
+
+    return () => {
+      eventBus.off('themechange', handleCustomEvent);
+    };
+  })
   return (
-      <FluentProvider theme={webLightTheme}>
+      <FluentProvider theme={themeInfo}>
         <div className="zl-365-container">
           <Header></Header>
           <Bar></Bar>

src/bus/index.js

@@ -0,0 +1,27 @@
+class EventBus {
+    constructor() {
+        this.handlers = {};
+    }
+
+    on(eventType, handler) {
+        if (!this.handlers[eventType]) {
+            this.handlers[eventType] = [];
+        }
+        this.handlers[eventType].push(handler);
+    }
+
+    off(eventType, handler) {
+        if (this.handlers[eventType]) {
+            this.handlers[eventType] = this.handlers[eventType].filter(h => h !== handler);
+        }
+    }
+
+    emit(eventType, data) {
+        const handlers = this.handlers[eventType];
+        if (handlers) {
+            handlers.forEach(handler => handler(data));
+        }
+    }
+}
+
+export default new EventBus();