diff --git a/shared/contexts/ColorSchemeContext.tsx b/shared/contexts/ColorSchemeContext.tsx
index d5cc75a1..29f88d7f 100644
--- a/shared/contexts/ColorSchemeContext.tsx
+++ b/shared/contexts/ColorSchemeContext.tsx
@@ -1,6 +1,7 @@
-import React, { useContext } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { useStorage } from 'tailchat-shared';
 import { parseColorScheme } from '../../web/src/utils/color-scheme-helper';
+import { sharedEvent } from '../event';
 
 const ColorSchemeContext = React.createContext<{
   /**
@@ -15,11 +16,19 @@ const ColorSchemeContext = React.createContext<{
 ColorSchemeContext.displayName = 'ColorSchemeContext';
 
 export const ColorSchemeContextProvider: React.FC = React.memo((props) => {
-  const [colorScheme = 'dark', { save: setColorScheme }] = useStorage(
+  const [colorScheme = 'dark', { save: saveColorScheme }] = useStorage(
     'colorScheme',
     'dark'
   );
 
+  const setColorScheme = useCallback(
+    (colorScheme: string) => {
+      sharedEvent.emit('changeColorScheme', colorScheme);
+      saveColorScheme(colorScheme);
+    },
+    [saveColorScheme]
+  );
+
   return (
     <ColorSchemeContext.Provider value={{ colorScheme, setColorScheme }}>
       {props.children}
diff --git a/shared/event/index.ts b/shared/event/index.ts
new file mode 100644
index 00000000..0841a97d
--- /dev/null
+++ b/shared/event/index.ts
@@ -0,0 +1,32 @@
+import { EventEmitter } from 'events';
+
+/**
+ * 共享事件类型
+ */
+export interface SharedEventMap {
+  /**
+   * 修改配色方案
+   */
+  changeColorScheme: (scheme: string) => void;
+}
+export type SharedEventType = keyof SharedEventMap;
+
+const bus = new EventEmitter();
+
+/**
+ * 事件中心
+ */
+export const sharedEvent = {
+  on<T extends SharedEventType>(eventName: T, listener: SharedEventMap[T]) {
+    bus.on(eventName, listener);
+  },
+  off<T extends SharedEventType>(eventName: T, listener: SharedEventMap[T]) {
+    bus.off(eventName, listener);
+  },
+  emit<T extends SharedEventType>(
+    eventName: T,
+    ...args: Parameters<SharedEventMap[T]>
+  ) {
+    bus.emit(eventName, ...args);
+  },
+};
diff --git a/shared/index.tsx b/shared/index.tsx
index 34ee72a9..3eca1506 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -44,6 +44,10 @@ export {
   useGroupInfoContext,
 } from './contexts/GroupInfoContext';
 
+// event
+export { sharedEvent } from './event/index';
+
+// helper
 export { getDMConverseName } from './helper/converse-helper';
 
 // i18n
diff --git a/shared/package.json b/shared/package.json
index 279ed47f..4295c996 100644
--- a/shared/package.json
+++ b/shared/package.json
@@ -11,6 +11,7 @@
     "axios": "^0.21.1",
     "crc": "^3.8.0",
     "dayjs": "^1.10.6",
+    "events": "^3.3.0",
     "formik": "^2.2.9",
     "i18next": "^20.3.2",
     "i18next-http-backend": "^1.2.6",
diff --git a/web/src/plugin/common/index.ts b/web/src/plugin/common/index.ts
index 3b0eceb4..af55113b 100644
--- a/web/src/plugin/common/index.ts
+++ b/web/src/plugin/common/index.ts
@@ -14,4 +14,5 @@ export {
   getCachedUserInfo,
   getCachedConverseInfo,
   localTrans,
+  sharedEvent,
 } from 'tailchat-shared';
diff --git a/yarn.lock b/yarn.lock
index 717b45ad..3242ab5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5012,6 +5012,11 @@ events@^3.2.0:
   resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
+events@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
 execa@^5.0.0, execa@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"