Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 19:12:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(electron): background effects on fixed light/dark mode (closes #1209)

Browse Source
This commit is contained in:
Elian Doran 2025-02-17 18:07:36 +02:00
parent 5550885206
commit e39bee23aa
No known key found for this signature in database
3 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/public/app/desktop.ts
View File

@ -50,6 +50,7 @@ function initOnElectron() {
const currentWindow = electronRemote.getCurrentWindow(); const currentWindow = electronRemote.getCurrentWindow();
const style = window.getComputedStyle(document.body); const style = window.getComputedStyle(document.body);
initDarkOrLightMode(style);
initTransparencyEffects(style, currentWindow); initTransparencyEffects(style, currentWindow);
if (options.get("nativeTitleBarVisible") !== "true") { if (options.get("nativeTitleBarVisible") !== "true") {
@ -91,3 +92,21 @@ function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Elec
} }
} }
} }
/**
* Informs Electron that we prefer a dark or light theme. Apart from changing prefers-color-scheme at CSS level which is a side effect,
* this fixes color issues with background effects or native title bars.
*
* @param style the root CSS element to read variables from.
*/
function initDarkOrLightMode(style: CSSStyleDeclaration) {
let themeSource: typeof nativeTheme.themeSource = "system";
const themeStyle = style.getPropertyValue("--theme-style");
if (style.getPropertyValue("--theme-style-auto") !== "true" && (themeStyle === "light" || themeStyle === "dark")) {
themeSource = themeStyle;
}
const { nativeTheme } = utils.dynamicRequire("@electron/remote") as typeof ElectronRemote;
nativeTheme.themeSource = themeSource;
}

4
src/public/stylesheets/theme-next.css
View File

@ -5,3 +5,7 @@
/* Import the dark color scheme when the system preference is set to dark mode */ /* Import the dark color scheme when the system preference is set to dark mode */
@import url(./theme-next-dark.css) (prefers-color-scheme: dark); @import url(./theme-next-dark.css) (prefers-color-scheme: dark);
:root {
--theme-style-auto: true;
}

4
src/public/stylesheets/theme.css
View File

@ -5,3 +5,7 @@
/* Import the dark color scheme when the system preference is set to dark mode */ /* Import the dark color scheme when the system preference is set to dark mode */
@import url(./theme-dark.css) (prefers-color-scheme: dark); @import url(./theme-dark.css) (prefers-color-scheme: dark);
:root {
--theme-style-auto: true;
}