fix: make macOS window transparency opt-in again

src/app/main/app.ts

@@ -13,12 +13,13 @@ import electronBuilderJson from '../../../electron-builder.json';
 // eslint-disable-next-line import/order, @typescript-eslint/no-unused-vars
 import packageJson from '../../../package.json';
 import { JITSI_SERVER_CAPTURE_SCREEN_PERMISSIONS_CLEARED } from '../../jitsi/actions';
-import { dispatch, listen } from '../../store';
+import { dispatch, listen, select } from '../../store';
 import { readSetting } from '../../store/readSetting';
 import {
   SETTINGS_CLEAR_PERMITTED_SCREEN_CAPTURE_PERMISSIONS,
   SETTINGS_NTLM_CREDENTIALS_CHANGED,
   SETTINGS_SET_HARDWARE_ACCELERATION_OPT_IN_CHANGED,
+  SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED,
   SETTINGS_SET_IS_VIDEO_CALL_SCREEN_CAPTURE_FALLBACK_ENABLED_CHANGED,
 } from '../../ui/actions';
 import { askForClearScreenCapturePermission } from '../../ui/main/dialogs';
@@ -31,6 +32,8 @@ import {
   APP_VERSION_SET,
   APP_SCREEN_CAPTURE_FALLBACK_FORCED_SET,
 } from '../actions';
+import { selectPersistableValues } from '../selectors';
+import { flushPersistedValues, persistValues } from './persistence';
 
 export const packageJsonInformation = {
   productName: packageJson.productName,
@@ -365,6 +368,12 @@ export const setupApp = (): void => {
     relaunchApp();
   });
 
+  listen(SETTINGS_SET_IS_TRANSPARENT_WINDOW_ENABLED_CHANGED, () => {
+    persistValues(select(selectPersistableValues));
+    flushPersistedValues();
+    relaunchApp();
+  });
+
   listen(
     SETTINGS_SET_IS_VIDEO_CALL_SCREEN_CAPTURE_FALLBACK_ENABLED_CHANGED,
     (action) => {

src/ui/main/rootWindow.spec.ts

@@ -516,3 +516,46 @@ describe('isInsideSomeScreen', () => {
     ).toBe(false);
   });
 });
+
+describe('getRootWindowAppearanceOptions', () => {
+  const { getRootWindowAppearanceOptions } = require('./rootWindow');
+
+  it('keeps the default macOS window opaque', () => {
+    expect(
+      getRootWindowAppearanceOptions({
+        platform: 'darwin',
+        isTransparentWindowEnabled: false,
+        shouldUseDarkColors: true,
+      })
+    ).toEqual({ backgroundColor: '#2f343d' });
+  });
+
+  it('enables macOS vibrancy only when transparency is enabled', () => {
+    expect(
+      getRootWindowAppearanceOptions({
+        platform: 'darwin',
+        isTransparentWindowEnabled: true,
+        shouldUseDarkColors: false,
+      })
+    ).toEqual({
+      transparent: true,
+      backgroundColor: '#00000000',
+      vibrancy: 'sidebar',
+      visualEffectState: 'active',
+    });
+  });
+
+  it('preserves transparent client chrome on Linux', () => {
+    expect(
+      getRootWindowAppearanceOptions({
+        platform: 'linux',
+        isTransparentWindowEnabled: false,
+        shouldUseDarkColors: false,
+      })
+    ).toEqual({
+      transparent: true,
+      backgroundColor: '#00000000',
+      hasShadow: true,
+    });
+  });
+});

src/ui/main/rootWindow.ts

@@ -1,6 +1,7 @@
 import path from 'path';
 
 import type {
+  BrowserWindowConstructorOptions,
   ContextMenuParams,
   Rectangle,
   NativeImage,
@@ -88,9 +89,53 @@ const platformTitleBarStyle =
     : 'default';
 
 const isMac = process.platform === 'darwin';
-// Linux client chrome is a plain rectangle under most WMs. Transparent + CSS
-// radius paints soft outer corners. Windows already gets DWM rounding — leave it.
-const usesLinuxClientChromeRounding = process.platform === 'linux';
+
+export const getRootWindowAppearanceOptions = ({
+  platform,
+  isTransparentWindowEnabled,
+  shouldUseDarkColors,
+}: {
+  platform: NodeJS.Platform;
+  isTransparentWindowEnabled: boolean;
+  shouldUseDarkColors: boolean;
+}): BrowserWindowConstructorOptions => {
+  if (platform === 'darwin') {
+    if (isTransparentWindowEnabled) {
+      return {
+        transparent: true,
+        backgroundColor: '#00000000',
+        vibrancy: 'sidebar',
+        visualEffectState: 'active',
+      };
+    }
+
+    return {
+      backgroundColor: shouldUseDarkColors ? '#2f343d' : '#ffffff',
+    };
+  }
+
+  if (platform === 'linux') {
+    // Linux client chrome is a plain rectangle under most WMs. Transparent +
+    // CSS radius paints soft outer corners. Windows gets DWM rounding.
+    return {
+      transparent: true,
+      backgroundColor: '#00000000',
+      hasShadow: true,
+    };
+  }
+
+  return {};
+};
+
+const isMacTransparencyEnabled = (): boolean => {
+  if (!isMac) {
+    return false;
+  }
+
+  return select(
+    ({ isTransparentWindowEnabled }) => isTransparentWindowEnabled === true
+  );
+};
 
 export const createRootWindow = (): void => {
   _rootWindow = new BrowserWindow({
@@ -102,20 +147,11 @@ export const createRootWindow = (): void => {
     ...(isMac ? { trafficLightPosition: { x: 12, y: 13 } } : {}),
     show: false,
     webPreferences,
-    ...(isMac
-      ? {
-          transparent: true,
-          vibrancy: 'sidebar',
-          visualEffectState: 'active',
-        }
-      : {}),
-    ...(usesLinuxClientChromeRounding
-      ? {
-          transparent: true,
-          backgroundColor: '#00000000',
-          hasShadow: true,
-        }
-      : {}),
+    ...getRootWindowAppearanceOptions({
+      platform: process.platform,
+      isTransparentWindowEnabled: isMacTransparencyEnabled(),
+      shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
+    }),
   });
 
   // Block navigation to smb:// protocol