From 19b7e3aad6ed1f28630e8618d849da859f5d952c Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 6 Jan 2023 22:50:11 +0800 Subject: [PATCH] =?UTF-8?q?:art:=20=E5=B7=A5=E4=BD=9C=E7=A9=BA=E9=97=B4?= =?UTF-8?q?=E5=A4=9A=E5=BC=80=EF=BC=8C=E4=B8=BB=E9=A2=98=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E4=BA=92=E8=A1=A5=E5=B9=B2=E6=89=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/electron/main.js | 4 -- app/src/config/appearance.ts | 37 ++++++----- app/src/constants.ts | 1 - app/src/util/assets.ts | 116 ++++++++++++++++------------------- app/src/util/onGetConfig.ts | 2 +- 5 files changed, 73 insertions(+), 87 deletions(-) diff --git a/app/electron/main.js b/app/electron/main.js index fbfe941cd..f9ac4eae5 100644 --- a/app/electron/main.js +++ b/app/electron/main.js @@ -20,7 +20,6 @@ const { shell, Menu, screen, - nativeTheme, ipcMain, globalShortcut, Tray, @@ -642,9 +641,6 @@ app.whenReady().then(() => { } mainWindow.focus() }) - ipcMain.on('siyuan-config-theme', (event, theme) => { - nativeTheme.themeSource = theme - }) ipcMain.on('siyuan-config-tray', (event, data) => { workspaces.find(item => { if (item.id === data.id) { diff --git a/app/src/config/appearance.ts b/app/src/config/appearance.ts index 512e4100d..e2e10796b 100644 --- a/app/src/config/appearance.ts +++ b/app/src/config/appearance.ts @@ -188,18 +188,22 @@ export const appearance = { nativeEmoji: (appearance.element.querySelector("#nativeEmoji") as HTMLInputElement).checked, hideStatusBar: (appearance.element.querySelector("#hideStatusBar") as HTMLInputElement).checked, }, response => { - if (( - window.siyuan.config.appearance.themeJS && - ( - 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; + if (window.siyuan.config.appearance.themeJS) { + if (!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 + )) { + exportLayout(true); + return; + } + const OSTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + if (response.data.modeOS && ( + (response.data.mode === 1 && OSTheme === "light") || (response.data.mode === 0 && OSTheme === "dark") + )) { + exportLayout(true); + return; + } } appearance.onSetappearance(response.data); if (response.data.hideStatusBar) { @@ -244,7 +248,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; @@ -272,12 +276,7 @@ export const appearance = { iconElement.innerHTML = genOptions(window.siyuan.config.appearance.icons, window.siyuan.config.appearance.icon); } } - /// #if !BROWSER - ipcRenderer.send(Constants.SIYUAN_CONFIG_THEME, data.modeOS ? "system" : (data.mode === 1 ? "dark" : "light")); - /// #endif - if (needLoadAsset) { - loadAssets(data); - } + 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 c329be9e3..e82540e0a 100644 --- a/app/src/constants.ts +++ b/app/src/constants.ts @@ -21,7 +21,6 @@ export abstract class Constants { // 渲染进程调主进程 public static readonly SIYUAN_SHOW: string = "siyuan-show"; - public static readonly SIYUAN_CONFIG_THEME: string = "siyuan-config-theme"; public static readonly SIYUAN_CONFIG_TRAY: string = "siyuan-config-tray"; public static readonly SIYUAN_OPEN_WORKSPACE: string = "siyuan-open-workspace"; public static readonly SIYUAN_QUIT: string = "siyuan-quit"; diff --git a/app/src/util/assets.ts b/app/src/util/assets.ts index 3700a3f20..d087637f7 100644 --- a/app/src/util/assets.ts +++ b/app/src/util/assets.ts @@ -2,12 +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"; import {exportLayout} from "../layout/util"; /// #endif -import {isBrowser, isMobile} from "./functions"; +import {isMobile} from "./functions"; import {fetchPost} from "./fetch"; +import {appearance} from "../config/appearance"; const loadThirdIcon = (iconURL: string, data: IAppearance) => { addScript(iconURL, "iconDefaultScript").then(() => { @@ -22,6 +22,15 @@ const loadThirdIcon = (iconURL: string, data: IAppearance) => { }; export const loadAssets = (data: IAppearance) => { + const OSTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + if (window.siyuan.config.appearance.modeOS && ( + (window.siyuan.config.appearance.mode === 1 && OSTheme === "light") || + (window.siyuan.config.appearance.mode === 0 && OSTheme === "dark") + )) { + fetchPost("/api/system/setAppearanceMode", {mode: OSTheme === "light" ? 0 : 1}); + window.siyuan.config.appearance.mode = (OSTheme === "light" ? 0 : 1); + } + const defaultStyleElement = document.getElementById("themeDefaultStyle"); let defaultThemeAddress = `/appearance/themes/${data.mode === 1 ? "midnight" : "daylight"}/${data.customCSS ? "custom" : "theme"}.css?v=${data.customCSS ? new Date().getTime() : Constants.SIYUAN_VERSION}`; if ((data.mode === 1 && data.themeDark !== "midnight") || (data.mode === 0 && data.themeLight !== "daylight")) { @@ -115,9 +124,31 @@ export const initAssets = () => { loadingElement.remove(); }, 160); } - watchTheme({init: true, OSTheme: window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"}); + updateMobileTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => { - watchTheme({init: false, OSTheme: event.matches ? "dark" : "light"}); + const OSTheme = event.matches ? "dark" : "light" + updateMobileTheme(OSTheme); + if (!window.siyuan.config.appearance.modeOS) { + return; + } + if ((window.siyuan.config.appearance.mode === 0 && OSTheme === "light") || + (window.siyuan.config.appearance.mode === 1 && OSTheme === "dark")) { + return; + } + fetchPost("/api/system/setAppearanceMode", { + mode: OSTheme === "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); + }); }); }; @@ -218,38 +249,36 @@ export const setMode = (modeElementValue: number) => { 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 - ) - ) || - // Electron 中 ipcRenderer 会触发 nativeTheme.themeSource 从而触发 window.matchMedia 中的 watchTheme - (response.data.modeOS && !window.siyuan.config.appearance.modeOS && isBrowser()) - ) { - exportLayout(true); - return; + if (window.siyuan.config.appearance.themeJS) { + if (!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 + )) { + exportLayout(true); + return; + } + const OSTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; + if (response.data.modeOS && ( + (response.data.mode === 1 && OSTheme === "light") || (response.data.mode === 0 && OSTheme === "dark") + )) { + 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")); - /// #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")}`); + appearance.onSetappearance(response.data); }); /// #endif }; -const watchTheme = (data: { init: boolean, OSTheme: string }) => { +const updateMobileTheme = (OSTheme: string) => { if ((window.siyuan.config.system.container === "ios" && window.webkit?.messageHandlers) || (window.siyuan.config.system.container === "android" && window.JSAndroid)) { setTimeout(() => { const backgroundColor = getComputedStyle(document.body).getPropertyValue("--b3-theme-background"); let mode = window.siyuan.config.appearance.mode; if (window.siyuan.config.appearance.modeOS) { - if (data.OSTheme === "dark") { + if (OSTheme === "dark") { mode = 1; } else { mode = 0; @@ -262,41 +291,4 @@ const watchTheme = (data: { init: boolean, OSTheme: string }) => { } }, 500); // 移动端需要加载完才可以获取到颜色 } - if (data.init) { - if (window.siyuan.config.appearance.modeOS && ( - (window.siyuan.config.appearance.mode === 1 && data.OSTheme === "light") || - (window.siyuan.config.appearance.mode === 0 && data.OSTheme === "dark") - )) { - fetchPost("/api/system/setAppearanceMode", { - mode: data.OSTheme === "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.OSTheme === "light") || - (window.siyuan.config.appearance.mode === 1 && data.OSTheme === "dark")) { - return; - } - fetchPost("/api/system/setAppearanceMode", { - mode: data.OSTheme === "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 d181faa7a..a985f56f3 100644 --- a/app/src/util/onGetConfig.ts +++ b/app/src/util/onGetConfig.ts @@ -162,7 +162,7 @@ export const onGetConfig = (isStart: boolean) => { initBar(); initStatus(); initWindow(); - appearance.onSetappearance(window.siyuan.config.appearance, false); + appearance.onSetappearance(window.siyuan.config.appearance); initAssets(); renderSnippet(); setInlineStyle();