diff --git a/app/src/config/appearance.ts b/app/src/config/appearance.ts
index d0549c59d..fb0ac31f5 100644
--- a/app/src/config/appearance.ts
+++ b/app/src/config/appearance.ts
@@ -352,5 +352,6 @@ export const appearance = {
         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/util/assets.ts b/app/src/util/assets.ts
index 6bf1fb470..4be0b6493 100644
--- a/app/src/util/assets.ts
+++ b/app/src/util/assets.ts
@@ -2,10 +2,12 @@ import {Constants} from "../constants";
 import {addScript} from "../protyle/util/addScript";
 import {addStyle} from "../protyle/util/addStyle";
 /// #if !MOBILE
+import {ipcRenderer} from "electron";
 import {getAllModels} from "../layout/getAll";
 /// #endif
 import {isMobile} from "./functions";
 import {fetchPost} from "./fetch";
+import {exportLayout} from "../layout/util";
 
 export const loadAssets = (data: IAppearance) => {
     const defaultStyleElement = document.getElementById("themeDefaultStyle");
@@ -150,3 +152,31 @@ export const setCodeTheme = (cdn = Constants.PROTYLE_CDN) => {
         addStyle(href, "protyleHljsStyle");
     }
 };
+
+export const setMode = (modeElementValue: number) => {
+    fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, {
+        mode: modeElementValue === 2 ? window.siyuan.config.appearance.mode : modeElementValue,
+        modeOS: modeElementValue === 2,
+    }), response => {
+        if ((
+                window.siyuan.config.appearance.themeJS && !response.data.modeOS &&
+                (
+                    response.data.mode !== window.siyuan.config.appearance.mode ||
+                    window.siyuan.config.appearance.themeLight !== response.data.themeLight ||
+                    window.siyuan.config.appearance.themeDark !== response.data.themeDark
+                )
+            ) ||
+            (response.data.modeOS && !window.siyuan.config.appearance.modeOS)
+        ) {
+            exportLayout(true);
+            return;
+        }
+        window.siyuan.config.appearance = response.data
+        /// #if !BROWSER
+        ipcRenderer.send(Constants.SIYUAN_CONFIG_THEME, response.data.modeOS ? "system" : (response.data.mode === 1 ? "dark" : "light"));
+        ipcRenderer.send(Constants.SIYUAN_CONFIG_CLOSE, response.data.closeButtonBehavior);
+        /// #endif
+        loadAssets(response.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/util/onGetConfig.ts b/app/src/util/onGetConfig.ts
index 1f25b030f..6f0ca8649 100644
--- a/app/src/util/onGetConfig.ts
+++ b/app/src/util/onGetConfig.ts
@@ -14,7 +14,7 @@ import {globalShortcut} from "./globalShortcut";
 import {fetchPost} from "./fetch";
 import {mountHelp, newDailyNote} from "./mount";
 import {MenuItem} from "../menus/Menu";
-import {initAssets, loadAssets, renderSnippet, setInlineStyle} from "./assets";
+import {initAssets, loadAssets, renderSnippet, setInlineStyle, setMode} from "./assets";
 import {goBack, goForward} from "./backForward";
 import {getOpenNotebookCount} from "./pathName";
 import {openFileById} from "../editor/util";
@@ -180,6 +180,9 @@ const initBar = () => {
 <div id="barReadonly" class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.use} ${window.siyuan.config.editor.readOnly ? window.siyuan.languages.editMode : window.siyuan.languages.editReadonly}">
     <svg><use xlink:href="#icon${window.siyuan.config.editor.readOnly ? "Preview" : "Edit"}"></use></svg>
 </div>
+<div id="barMode" class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.appearance4}">
+    <svg><use xlink:href="#icon${window.siyuan.config.appearance.modeOS ? "Mode" : (window.siyuan.config.appearance.mode === 0 ? "Light" : "Dark")}"></use></svg>
+</div>
 <button id="barBack" data-menu="true" class="toolbar__item toolbar__item--disabled b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.goBack} ${updateHotkeyTip(window.siyuan.config.keymap.general.goBack.custom)}">
     <svg><use xlink:href="#iconLeft"></use></svg>
 </button>
@@ -203,6 +206,35 @@ const initBar = () => {
                 editor.setMode();
                 event.stopPropagation();
                 break;
+            } else if (target.id === "barMode") {
+                window.siyuan.menus.menu.remove();
+                window.siyuan.menus.menu.append(new MenuItem({
+                    label: window.siyuan.languages.themeLight,
+                    icon: "iconLight",
+                    current: window.siyuan.config.appearance.mode === 0 && !window.siyuan.config.appearance.modeOS,
+                    click: () => {
+                        setMode(0);
+                    }
+                }).element);
+                window.siyuan.menus.menu.append(new MenuItem({
+                    label: window.siyuan.languages.themeDark,
+                    current: window.siyuan.config.appearance.mode === 1 && !window.siyuan.config.appearance.modeOS,
+                    icon: "iconDark",
+                    click: () => {
+                        setMode(1);
+                    }
+                }).element);
+                window.siyuan.menus.menu.append(new MenuItem({
+                    label: window.siyuan.languages.themeOS,
+                    current: window.siyuan.config.appearance.modeOS,
+                    icon: "iconMode",
+                    click: () => {
+                        setMode(2);
+                    }
+                }).element);
+                window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY + 8});
+                event.stopPropagation();
+                break;
             } else if (target.id === "barForward") {
                 goForward();
                 event.stopPropagation();