diff --git a/app/electron/main.js b/app/electron/main.js
index d7f912c7d..fb27463d8 100644
--- a/app/electron/main.js
+++ b/app/electron/main.js
@@ -349,12 +349,6 @@ const boot = () => {
     }
     event.preventDefault()
   })
-  nativeTheme.on('updated', () => {
-    mainWindow.webContents.send('siyuan-update-theme', {
-      theme: nativeTheme.shouldUseDarkColors ? 'dark' : 'light',
-      init: false,
-    })
-  })
   // 监听主题切换
   ipcMain.on('siyuan-config-theme', (event, theme) => {
     nativeTheme.themeSource = theme
@@ -400,10 +394,6 @@ const boot = () => {
     writeLog('exited ui')
   })
   ipcMain.on('siyuan-init', async () => {
-    mainWindow.webContents.send('siyuan-update-theme', {
-      theme: nativeTheme.shouldUseDarkColors ? 'dark' : 'light',
-      init: true,
-    })
     await fetch(getServer() + '/api/system/uiproc?pid=' + process.pid,
       {method: 'POST'})
   })
diff --git a/app/src/config/appearance.ts b/app/src/config/appearance.ts
index cbb5262c0..3d64f75b2 100644
--- a/app/src/config/appearance.ts
+++ b/app/src/config/appearance.ts
@@ -244,7 +244,7 @@ export const appearance = {
             });
         });
     },
-    onSetappearance(data: IAppearance, needLoadAsset = true) {
+    onSetappearance(data: IAppearance) {
         if (data.lang !== window.siyuan.config.appearance.lang || data.nativeEmoji !== window.siyuan.config.appearance.nativeEmoji) {
             exportLayout(true);
             return;
@@ -276,9 +276,6 @@ export const appearance = {
         ipcRenderer.send(Constants.SIYUAN_CONFIG_THEME, data.modeOS ? "system" : (data.mode === 1 ? "dark" : "light"));
         ipcRenderer.send(Constants.SIYUAN_CONFIG_CLOSE, data.closeButtonBehavior);
         /// #endif
-        if (needLoadAsset) {
-            loadAssets(data);
-        }
         document.querySelector("#barMode use").setAttribute("xlink:href", `#icon${window.siyuan.config.appearance.modeOS ? "Mode" : (window.siyuan.config.appearance.mode === 0 ? "Light" : "Dark")}`);
     }
 };
diff --git a/app/src/constants.ts b/app/src/constants.ts
index 0bce7fac4..b97ff405b 100644
--- a/app/src/constants.ts
+++ b/app/src/constants.ts
@@ -31,7 +31,6 @@ export abstract class Constants {
     public static readonly SIYUAN_SAVE_CLOSE: string = "siyuan-save-close";
     public static readonly SIYUAN_EXPORT_PDF: string = "siyuan-export-pdf";
     public static readonly SIYUAN_EXPORT_CLOSE: string = "siyuan-export-close";
-    public static readonly SIYUAN_UPDATE_THEME: string = "siyuan-update-theme";
 
     // size
     public static readonly SIZE_TOOLBAR_HEIGHT: number = 42;
diff --git a/app/src/util/assets.ts b/app/src/util/assets.ts
index bff9042f2..a7574aed3 100644
--- a/app/src/util/assets.ts
+++ b/app/src/util/assets.ts
@@ -120,6 +120,10 @@ export const initAssets = () => {
             loadingElement.remove();
         }, 160);
     }
+    watchTheme({init: true, theme: window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"});
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
+        watchTheme({init: false, theme: event.matches ? "dark" : "light"});
+    });
 };
 
 export const addGA = () => {
@@ -241,3 +245,44 @@ export const setMode = (modeElementValue: number) => {
     });
     /// #endif
 };
+
+
+export const watchTheme = (data: { init: boolean, theme: string }) => {
+    if (data.init) {
+        if (window.siyuan.config.appearance.modeOS && (
+            (window.siyuan.config.appearance.mode === 1 && data.theme === "light") ||
+            (window.siyuan.config.appearance.mode === 0 && data.theme === "dark")
+        )) {
+            fetchPost("/api/system/setAppearanceMode", {
+                mode: data.theme === "light" ? 0 : 1
+            }, response => {
+                window.siyuan.config.appearance = response.data.appearance;
+                loadAssets(response.data.appearance);
+            });
+        } else {
+            loadAssets(window.siyuan.config.appearance);
+        }
+        return;
+    }
+    if (!window.siyuan.config.appearance.modeOS) {
+        return;
+    }
+    if ((window.siyuan.config.appearance.mode === 0 && data.theme === "light") ||
+        (window.siyuan.config.appearance.mode === 1 && data.theme === "dark")) {
+        return;
+    }
+    fetchPost("/api/system/setAppearanceMode", {
+        mode: data.theme === "light" ? 0 : 1
+    }, response => {
+        if (window.siyuan.config.appearance.themeJS) {
+            /// #if !MOBILE
+            exportLayout(true);
+            /// #else
+            window.location.reload();
+            /// #endif
+            return;
+        }
+        window.siyuan.config.appearance = response.data.appearance;
+        loadAssets(response.data.appearance);
+    });
+}
diff --git a/app/src/util/onGetConfig.ts b/app/src/util/onGetConfig.ts
index e6cf9ef34..4c6da1815 100644
--- a/app/src/util/onGetConfig.ts
+++ b/app/src/util/onGetConfig.ts
@@ -15,7 +15,7 @@ import {globalShortcut} from "./globalShortcut";
 import {fetchPost} from "./fetch";
 import {mountHelp, newDailyNote} from "./mount";
 import {MenuItem} from "../menus/Menu";
-import {addGA, initAssets, loadAssets, setInlineStyle, setMode} from "./assets";
+import {addGA, initAssets, loadAssets, setInlineStyle, setMode, watchTheme} from "./assets";
 import {renderSnippet} from "../config/util/snippets";
 import {getOpenNotebookCount} from "./pathName";
 import {openFileById} from "../editor/util";
@@ -143,7 +143,7 @@ export const onGetConfig = (isStart: boolean) => {
     initBar();
     initStatus();
     initWindow();
-    appearance.onSetappearance(window.siyuan.config.appearance, isBrowser());
+    appearance.onSetappearance(window.siyuan.config.appearance);
     initAssets();
     renderSnippet();
     setInlineStyle();
@@ -343,41 +343,6 @@ const initWindow = () => {
             zoomIn: getSearch("focus", url) === "1"
         });
     });
-    ipcRenderer.on(Constants.SIYUAN_UPDATE_THEME, (event, data) => {
-        if (data.init) {
-            if (window.siyuan.config.appearance.modeOS && (
-                (window.siyuan.config.appearance.mode === 1 && data.theme === "light") ||
-                (window.siyuan.config.appearance.mode === 0 && data.theme === "dark")
-            )) {
-                fetchPost("/api/system/setAppearanceMode", {
-                    mode: data.theme === "light" ? 0 : 1
-                }, response => {
-                    window.siyuan.config.appearance = response.data.appearance;
-                    loadAssets(response.data.appearance);
-                });
-            } else {
-                loadAssets(window.siyuan.config.appearance);
-            }
-            return;
-        }
-        if (!window.siyuan.config.appearance.modeOS) {
-            return;
-        }
-        if ((window.siyuan.config.appearance.mode === 0 && data.theme === "light") ||
-            (window.siyuan.config.appearance.mode === 1 && data.theme === "dark")) {
-            return;
-        }
-        fetchPost("/api/system/setAppearanceMode", {
-            mode: data.theme === "light" ? 0 : 1
-        }, response => {
-            if (window.siyuan.config.appearance.themeJS) {
-                exportLayout(true);
-                return;
-            }
-            window.siyuan.config.appearance = response.data.appearance;
-            loadAssets(response.data.appearance);
-        });
-    });
     ipcRenderer.on(Constants.SIYUAN_SAVE_CLOSE, (event, close) => {
         winOnClose(currentWindow, close);
     });