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

src/public/app/desktop.ts

@@ -50,6 +50,7 @@ function initOnElectron() {
     const currentWindow = electronRemote.getCurrentWindow();
     const style = window.getComputedStyle(document.body);
 
+    initDarkOrLightMode(style);
     initTransparencyEffects(style, currentWindow);
 
     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;
+}

src/public/stylesheets/theme-next.css

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

src/public/stylesheets/theme.css

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