diff --git a/app/appearance/icons/ant/icon.js b/app/appearance/icons/ant/icon.js index 7efa2e547..fa5b16138 100644 --- a/app/appearance/icons/ant/icon.js +++ b/app/appearance/icons/ant/icon.js @@ -59,9 +59,6 @@ document.body.insertAdjacentHTML('afterBegin', ` - - - diff --git a/app/appearance/icons/index.html b/app/appearance/icons/index.html index 2b34525fa..970a29be1 100644 --- a/app/appearance/icons/index.html +++ b/app/appearance/icons/index.html @@ -142,12 +142,6 @@ iconAdd -
- - - - iconMoon -
diff --git a/app/appearance/icons/material/icon.js b/app/appearance/icons/material/icon.js index bba11b308..823ea527f 100644 --- a/app/appearance/icons/material/icon.js +++ b/app/appearance/icons/material/icon.js @@ -57,9 +57,6 @@ document.body.insertAdjacentHTML('afterbegin', ` - - - diff --git a/app/electron/main.js b/app/electron/main.js index 7e300f7b5..73c27a5ea 100644 --- a/app/electron/main.js +++ b/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'}) }) diff --git a/app/src/config/appearance.ts b/app/src/config/appearance.ts index ea764341c..2076f450d 100644 --- a/app/src/config/appearance.ts +++ b/app/src/config/appearance.ts @@ -20,9 +20,9 @@ export const appearance = {
@@ -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 (modeNumber !== window.siyuan.config.appearance.mode || themeLight !== window.siyuan.config.appearance.themeLight || - themeDark !== window.siyuan.config.appearance.themeDark) { - needTip = true; - } - if (window.siyuan.config.appearance.themeJS && needTip) { + if ((window.siyuan.config.appearance.themeJS && !response.data.modeOS && response.data.mode !== window.siyuan.config.appearance.mode) || + (response.data.modeOS && !window.siyuan.config.appearance.modeOS) + ) { exportLayout(true); return; } @@ -294,13 +292,7 @@ export const appearance = { /// #endif appearance.element.querySelectorAll("select").forEach(item => { item.addEventListener("change", () => { - let mode; - if (item.id === "themeLight") { - mode = 0; - } else if (item.id === "themeDark") { - mode = 1; - } - appearance._send(mode); + appearance._send(); }); }); 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 = ` -`; + if (data.modeOS) { + 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); - const modeElement = document.getElementById("barThemeMode"); - 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); - } + if (needLoadAsset) { + loadAssets(data); } } }; diff --git a/app/src/constants.ts b/app/src/constants.ts index 7b32dcb50..861bd1034 100644 --- a/app/src/constants.ts +++ b/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; diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts index 2dc6372cc..e8c4f566f 100644 --- a/app/src/types/index.d.ts +++ b/app/src/types/index.d.ts @@ -246,6 +246,7 @@ declare interface IWebSocketData { } declare interface IAppearance { + modeOS: boolean, hideStatusBar: boolean, nativeEmoji: boolean, customCSS: boolean, diff --git a/app/src/util/onGetConfig.ts b/app/src/util/onGetConfig.ts index 44a0f3056..4478dfb79 100644 --- a/app/src/util/onGetConfig.ts +++ b/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 = () => {
-
- - - -
@@ -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); });