✨ fix https://github.com/siyuan-note/siyuan/issues/5854

app/appearance/icons/ant/icon.js

@@ -59,9 +59,6 @@ document.body.insertAdjacentHTML('afterBegin', `<svg style="position: absolute;
     <path d="M15 4h2q0.267 0 0.267 0.267v23.467q0 0.267-0.267 0.267h-2q-0.267 0-0.267-0.267v-23.467q0-0.267 0.267-0.267z"></path>
     <path d="M4.8 14.733h22.401q0.267 0 0.267 0.267v2q0 0.267-0.267 0.267h-22.401q-0.267 0-0.267-0.267v-2q0-0.267 0.267-0.267z"></path>
   </symbol>
-  <symbol id="iconMoon" viewBox="0 0 32 32">
-    <path d="M11.324 4.462c-0.32 1.138-0.48 2.329-0.48 3.538 0 7.253 5.902 13.156 13.156 13.156 1.209 0 2.4-0.16 3.538-0.48-1.849 4.551-6.329 7.769-11.538 7.769-6.862 0-12.444-5.582-12.444-12.444 0-5.209 3.218-9.689 7.769-11.538zM16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16c0-0.818-0.071-1.636-0.178-2.418-1.742 2.436-4.587 4.018-7.822 4.018-5.298 0-9.6-4.302-9.6-9.6 0-3.218 1.582-6.080 4.018-7.822-0.782-0.107-1.6-0.178-2.418-0.178v0z"></path>
-  </symbol>
   <symbol id="iconCut" viewBox="0 0 32 32">
     <path d="M18.345 16l13.553-13.587c0.213-0.213 0.064-0.583-0.238-0.583h-3.851c-0.089 0-0.179 0.034-0.238 0.098l-11.63 11.66-3.838-3.851c0.532-0.94 0.838-2.026 0.838-3.183 0-3.57-2.898-6.468-6.468-6.468s-6.468 2.898-6.468 6.468 2.898 6.468 6.468 6.468c1.179 0 2.281-0.315 3.23-0.864l3.83 3.843-3.834 3.843c-0.923-0.543-2.033-0.864-3.218-0.864-0.004 0-0.008 0-0.012 0h0.001c-3.57 0-6.468 2.898-6.468 6.468s2.898 6.468 6.468 6.468 6.468-2.898 6.468-6.468c0-1.157-0.306-2.243-0.838-3.183l3.838-3.851 11.63 11.66c0.064 0.064 0.149 0.098 0.238 0.098h3.855c0.302 0 0.455-0.366 0.238-0.583l-13.553-13.587zM6.468 9.957c-1.877 0-3.404-1.528-3.404-3.404s1.528-3.404 3.404-3.404 3.404 1.528 3.404 3.404-1.528 3.404-3.404 3.404zM6.468 28.851c-1.877 0-3.404-1.528-3.404-3.404s1.528-3.404 3.404-3.404 3.404 1.528 3.404 3.404-1.528 3.404-3.404 3.404z"></path>
   </symbol>

app/appearance/icons/index.html

@@ -142,12 +142,6 @@
         </svg>
         iconAdd
     </div>
-    <div>
-        <svg>
-            <use xlink:href="#iconMoon"></use>
-        </svg>
-        iconMoon
-    </div>
     <div>
         <svg>
             <use xlink:href="#iconUncheck"></use>

app/appearance/icons/material/icon.js

@@ -57,9 +57,6 @@ document.body.insertAdjacentHTML('afterbegin', `<svg style="position: absolute;
   <symbol id="iconAdd" viewBox="0 0 32 32">
     <path d="M28 17.715h-10.285v10.285h-3.428v-10.285h-10.286v-3.428h10.286v-10.286h3.428v10.286h10.285v3.428z"></path>
   </symbol>
-  <symbol id="iconMoon" viewBox="0 0 32 32">
-    <path d="M11.324 4.462c-0.32 1.138-0.48 2.329-0.48 3.538 0 7.253 5.902 13.156 13.156 13.156 1.209 0 2.4-0.16 3.538-0.48-1.849 4.551-6.329 7.769-11.538 7.769-6.862 0-12.444-5.582-12.444-12.444 0-5.209 3.218-9.689 7.769-11.538zM16 0c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16c0-0.818-0.071-1.636-0.178-2.418-1.742 2.436-4.587 4.018-7.822 4.018-5.298 0-9.6-4.302-9.6-9.6 0-3.218 1.582-6.080 4.018-7.822-0.782-0.107-1.6-0.178-2.418-0.178v0z"></path>
-  </symbol>
   <symbol id="iconCut" viewBox="0 0 32 32">
     <path d="M12.224 9.024c0.368-0.8 0.576-1.68 0.576-2.624 0-3.536-2.864-6.4-6.4-6.4s-6.4 2.864-6.4 6.4 2.864 6.4 6.4 6.4c0.944 0 1.824-0.208 2.624-0.576l3.776 3.776-3.776 3.776c-0.8-0.368-1.68-0.576-2.624-0.576-3.536 0-6.4 2.864-6.4 6.4s2.864 6.4 6.4 6.4 6.4-2.864 6.4-6.4c0-0.944-0.208-1.824-0.576-2.624l3.776-3.776 11.2 11.2h4.8v-1.6l-19.776-19.776zM6.4 9.6c-1.76 0-3.2-1.424-3.2-3.2s1.44-3.2 3.2-3.2 3.2 1.424 3.2 3.2-1.44 3.2-3.2 3.2zM6.4 28.8c-1.76 0-3.2-1.424-3.2-3.2s1.44-3.2 3.2-3.2 3.2 1.424 3.2 3.2-1.44 3.2-3.2 3.2zM16 16.8c-0.448 0-0.8-0.352-0.8-0.8s0.352-0.8 0.8-0.8 0.8 0.352 0.8 0.8-0.352 0.8-0.8 0.8zM27.2 1.6l-9.6 9.6 3.2 3.2 11.2-11.2v-1.6h-4.8z"></path>
   </symbol>

app/electron/main.js

@@ -335,7 +335,12 @@ 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
@@ -376,6 +381,10 @@ 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('http://127.0.0.1:6806/api/system/uiproc?pid=' + process.pid,
       {method: 'POST'})
   })

app/src/config/appearance.ts

@@ -20,9 +20,9 @@ export const appearance = {
     </div>
     <span class="fn__space"></span>
     <select class="b3-select fn__flex-center fn__size200" id="mode">
-      <option value="0" ${window.siyuan.config.appearance.mode === 0 ? "selected" : ""}>${window.siyuan.languages.themeLight}</option>
+      <option value="0" ${(window.siyuan.config.appearance.mode === 0 && !window.siyuan.config.appearance.modeOS) ? "selected" : ""}>${window.siyuan.languages.themeLight}</option>
-      <option value="1" ${window.siyuan.config.appearance.mode === 1 ? "selected" : ""}>${window.siyuan.languages.themeDark}</option>
+      <option value="1" ${(window.siyuan.config.appearance.mode === 1 && !window.siyuan.config.appearance.modeOS) ? "selected" : ""}>${window.siyuan.languages.themeDark}</option>
-      <!--option value="dark" ${window.siyuan.config.appearance.mode === 2 ? "selected" : ""}>${window.siyuan.languages.appearance7}</option-->
+      <option value="2" ${window.siyuan.config.appearance.modeOS ? "selected" : ""}>${window.siyuan.languages.appearance7}</option>
     </select>
 </label>
 <div class="b3-label">
@@ -211,13 +211,14 @@ export const appearance = {
             css
         });
     },
-    _send: (mode?: number) => {
+    _send: () => {
         const themeLight = (appearance.element.querySelector("#themeLight") as HTMLSelectElement).value;
         const themeDark = (appearance.element.querySelector("#themeDark") as HTMLSelectElement).value;
-        const modeNumber = typeof mode === "number" ? mode : parseInt((appearance.element.querySelector("#mode") as HTMLSelectElement).value);
+        const modeElementValue = parseInt((appearance.element.querySelector("#mode") as HTMLSelectElement).value)
         fetchPost("/api/setting/setAppearance", {
             icon: (appearance.element.querySelector("#icon") as HTMLSelectElement).value,
-            mode: modeNumber,
+            mode: modeElementValue === 2 ? window.siyuan.config.appearance.mode : modeElementValue,
+            modeOS: modeElementValue === 2,
             codeBlockThemeDark: (appearance.element.querySelector("#codeBlockThemeDark") as HTMLSelectElement).value,
             codeBlockThemeLight: (appearance.element.querySelector("#codeBlockThemeLight") as HTMLSelectElement).value,
             themeDark,
@@ -231,12 +232,9 @@ export const appearance = {
             nativeEmoji: (appearance.element.querySelector("#nativeEmoji") as HTMLInputElement).checked,
             hideStatusBar: (appearance.element.querySelector("#hideStatusBar") as HTMLInputElement).checked,
         }, response => {
-            let needTip = false;
+            if ((window.siyuan.config.appearance.themeJS && !response.data.modeOS && response.data.mode !== window.siyuan.config.appearance.mode) ||
-            if (modeNumber !== window.siyuan.config.appearance.mode || themeLight !== window.siyuan.config.appearance.themeLight ||
+                (response.data.modeOS && !window.siyuan.config.appearance.modeOS)
-                themeDark !== window.siyuan.config.appearance.themeDark) {
+            ) {
-                needTip = true;
-            }
-            if (window.siyuan.config.appearance.themeJS && needTip) {
                 exportLayout(true);
                 return;
             }
@@ -294,13 +292,7 @@ export const appearance = {
         /// #endif
         appearance.element.querySelectorAll("select").forEach(item => {
             item.addEventListener("change", () => {
-                let mode;
+                appearance._send();
-                if (item.id === "themeLight") {
-                    mode = 0;
-                } else if (item.id === "themeDark") {
-                    mode = 1;
-                }
-                appearance._send(mode);
             });
         });
         appearance.element.querySelectorAll(".b3-switch").forEach((item) => {
@@ -309,7 +301,7 @@ export const appearance = {
             });
         });
     },
-    onSetappearance(data: IAppearance) {
+    onSetappearance(data: IAppearance, needLoadAsset = true) {
         if (data.lang !== window.siyuan.config.appearance.lang || data.nativeEmoji !== window.siyuan.config.appearance.nativeEmoji) {
             exportLayout(true);
             return;
@@ -317,10 +309,13 @@ export const appearance = {
         window.siyuan.config.appearance = data;
         if (appearance.element) {
             const theme = data.mode === 0 ? data.themeLight : data.themeDark;
-            const modeElement = appearance.element.querySelector("#mode");
+            const modeElement = appearance.element.querySelector("#mode") as HTMLSelectElement;
             if (modeElement) {
-                modeElement.innerHTML = `<option value="0" ${data.mode === 0 ? "selected" : ""}>${window.siyuan.languages.themeLight}</option>
+                if (data.modeOS) {
-<option value="1" ${data.mode === 1 ? "selected" : ""}>${window.siyuan.languages.themeDark}</option>`;
+                    modeElement.value = "2";
+                } else {
+                    modeElement.value = data.mode === 0 ? "0" : "1";
+                }
                 appearance.element.querySelector("#appearanceCustomName").textContent = theme;
             }
             const themeLightElement = appearance.element.querySelector("#themeLight") as HTMLSelectElement;
@@ -344,19 +339,11 @@ export const appearance = {
             }
         }
         /// #if !BROWSER
-        ipcRenderer.send(Constants.SIYUAN_CONFIG_THEME, data.mode === 1 ? "dark" : "light");
+        ipcRenderer.send(Constants.SIYUAN_CONFIG_THEME, data.modeOS ? "system" : (data.mode === 1 ? "dark" : "light"));
         ipcRenderer.send(Constants.SIYUAN_CONFIG_CLOSE, data.closeButtonBehavior);
         /// #endif
-        loadAssets(data);
+        if (needLoadAsset) {
-        const modeElement = document.getElementById("barThemeMode");
+            loadAssets(data);
-        if (modeElement) {
-            if (data.mode === 1) {
-                modeElement.classList.add("toolbar__item--active");
-                modeElement.setAttribute("aria-label", window.siyuan.languages.themeLight);
-            } else {
-                modeElement.classList.remove("toolbar__item--active");
-                modeElement.setAttribute("aria-label", window.siyuan.languages.themeDark);
-            }
         }
     }
 };

app/src/constants.ts

@@ -31,6 +31,7 @@ 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 = 30;

app/src/types/index.d.ts

@@ -246,6 +246,7 @@ declare interface IWebSocketData {
 }
 
 declare interface IAppearance {
+    modeOS: boolean,
     hideStatusBar: boolean,
     nativeEmoji: boolean,
     customCSS: boolean,

app/src/util/onGetConfig.ts

@@ -143,7 +143,7 @@ export const onGetConfig = (isStart: boolean) => {
     initBar();
     initStatus();
     initWindow();
-    appearance.onSetappearance(window.siyuan.config.appearance);
+    appearance.onSetappearance(window.siyuan.config.appearance, false);
     initAssets();
     setInlineStyle();
     let resizeTimeout = 0;
@@ -171,11 +171,6 @@ const initBar = () => {
         <use xlink:href="#iconSearch"></use>
     </svg>
 </div>
-<div id="barThemeMode" class="toolbar__item b3-tooltips b3-tooltips__se${window.siyuan.config.appearance.mode === 1 ? " toolbar__item--active" : ""}" aria-label="${window.siyuan.config.appearance.mode === 1 ? window.siyuan.languages.themeLight : window.siyuan.languages.themeDark}">
-    <svg>
-        <use xlink:href="#iconMoon"></use>
-    </svg>
-</div>
 <div id="barHistory" class="toolbar__item b3-tooltips b3-tooltips__se" aria-label="${window.siyuan.languages.dataHistory} ${updateHotkeyTip(window.siyuan.config.keymap.general.history.custom)}">
     <svg>
         <use xlink:href="#iconVideo"></use>
@@ -233,34 +228,6 @@ const initBar = () => {
                 openSearch(window.siyuan.config.keymap.general.globalSearch.custom);
                 event.stopPropagation();
                 break;
-            } else if (target.id === "barThemeMode") {
-                if (target.getAttribute("disabled")) {
-                    return;
-                }
-                if (target.classList.contains("toolbar__item--active")) {
-                    target.classList.remove("toolbar__item--active");
-                    target.setAttribute("aria-label", window.siyuan.languages.themeDark);
-                } else {
-                    target.classList.add("toolbar__item--active");
-                    target.setAttribute("aria-label", window.siyuan.languages.themeLight);
-                }
-                target.setAttribute("disabled", "disabled");
-                fetchPost("/api/system/setAppearanceMode", {
-                    mode: target.classList.contains("toolbar__item--active") ? 1 : 0
-                }, response => {
-                    if (window.siyuan.config.appearance.themeJS) {
-                        exportLayout(true);
-                        return;
-                    }
-                    window.siyuan.config.appearance = response.data.appearance;
-                    target.removeAttribute("disabled");
-                    /// #if !BROWSER
-                    ipcRenderer.send(Constants.SIYUAN_CONFIG_THEME, response.data.mode === 1 ? "dark" : "light");
-                    /// #endif
-                    loadAssets(response.data.appearance);
-                });
-                event.stopPropagation();
-                break;
             } else if (target.id === "barDailyNote") {
                 if (getOpenNotebookCount() < 2) {
                     newDailyNote();
@@ -343,6 +310,39 @@ const initWindow = () => {
             zoomIn: getSearch("focus", url) === "1"
         });
     });
+    ipcRenderer.on(Constants.SIYUAN_UPDATE_THEME, (event, data) => {
+        if (data.init) {
+            if ((window.siyuan.config.appearance.mode === 0 && data.theme === "light") ||
+                (window.siyuan.config.appearance.mode === 1 && data.theme === "dark")) {
+                loadAssets(window.siyuan.config.appearance);
+            } else {
+                fetchPost("/api/system/setAppearanceMode", {
+                    mode: data.theme === "light" ? 0 : 1
+                }, response => {
+                    window.siyuan.config.appearance = response.data.appearance;
+                    loadAssets(response.data.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);
     });