Subscribe to theme change in settings

main.js

@@ -61,6 +61,8 @@ let mainWindow;
 let mainWindowCreated = false;
 let loadingWindow;
 
+const activeWindows = new Set();
+
 function getMainWindow() {
   return mainWindow;
 }
@@ -312,6 +314,9 @@ function handleCommonWindowEvents(window) {
     console.error(`Preload error in ${preloadPath}: `, error.message);
   });
 
+  activeWindows.add(window);
+  window.on('closed', () => activeWindows.delete(window));
+
   // Works only for mainWindow because it has `enablePreferredSizeMode`
   let lastZoomFactor = window.webContents.getZoomFactor();
   const onZoomChanged = () => {
@@ -1804,8 +1809,10 @@ ipc.on('get-user-data-path', event => {
 
 // Refresh the settings window whenever preferences change
 ipc.on('preferences-changed', () => {
-  if (settingsWindow && settingsWindow.webContents) {
-    settingsWindow.webContents.send('render');
+  for (const window of activeWindows) {
+    if (window.webContents) {
+      window.webContents.send('preferences-changed');
+    }
   }
 });
 

ts/components/Preferences.stories.tsx

@@ -9,7 +9,6 @@ import enMessages from '../../_locales/en/messages.json';
 import { Preferences, PropsType } from './Preferences';
 import { setupI18n } from '../util/setupI18n';
 import { DEFAULT_CONVERSATION_COLOR } from '../types/Colors';
-import { ThemeType } from '../types/Util';
 import { PhoneNumberSharingMode } from '../util/phoneNumberSharingMode';
 import { PhoneNumberDiscoverability } from '../util/phoneNumberDiscoverability';
 
@@ -93,7 +92,6 @@ const createProps = (): PropsType => ({
     'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c',
   selectedMicrophone: availableMicrophones[0],
   selectedSpeaker: availableSpeakers[1],
-  theme: ThemeType.light,
   themeSetting: 'system',
   universalExpireTimer: 3600,
   whoCanFindMe: PhoneNumberDiscoverability.Discoverable,

ts/components/Preferences.tsx

@@ -69,7 +69,6 @@ export type PropsType = {
   selectedCamera?: string;
   selectedMicrophone?: AudioDevice;
   selectedSpeaker?: AudioDevice;
-  theme: ThemeType;
   themeSetting: ThemeSettingType;
   universalExpireTimer: number;
   whoCanFindMe: PhoneNumberDiscoverability;
@@ -257,7 +256,6 @@ export const Preferences = ({
   selectedMicrophone,
   selectedSpeaker,
   setGlobalDefaultConversationColor,
-  theme,
   themeSetting,
   universalExpireTimer = 0,
   whoCanFindMe,
@@ -273,11 +271,6 @@ export const Preferences = ({
     setShowDisappearingTimerDialog,
   ] = useState(false);
 
-  useEffect(() => {
-    document.body.classList.toggle('light-theme', theme === ThemeType.light);
-    document.body.classList.toggle('dark-theme', theme === ThemeType.dark);
-  }, [theme]);
-
   useEffect(() => {
     doneRendering();
   }, [doneRendering]);

ts/window.d.ts

@@ -474,6 +474,7 @@ declare global {
     SignalWindow: {
       Settings: {
         themeSetting: SettingType<IPCEventsValuesType['themeSetting']>;
+        waitForChange: () => Promise<void>;
       };
       config: string;
       context: SignalContext;

ts/windows/applyTheme.ts

@@ -14,7 +14,19 @@ async function applyTheme() {
   );
 }
 
+async function applyThemeLoop() {
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    // eslint-disable-next-line no-await-in-loop
+    await window.SignalWindow.Settings.waitForChange();
+
+    // eslint-disable-next-line no-await-in-loop
+    await applyTheme();
+  }
+}
+
 applyTheme();
+applyThemeLoop();
 
 window.SignalWindow.context.nativeThemeListener.subscribe(() => {
   applyTheme();

ts/windows/configure.ts

@@ -13,6 +13,7 @@ import {
 import { strictAssert } from '../util/assert';
 import { createSetting } from '../util/preload';
 import { initialize as initializeLogging } from '../logging/set_up_renderer_logging';
+import { waitForSettingsChange } from './waitForSettingsChange';
 
 const config = url.parse(window.location.toString(), true).query;
 const { locale } = config;
@@ -29,6 +30,7 @@ initializeLogging();
 export const SignalWindow = {
   Settings: {
     themeSetting: createSetting('themeSetting', { setter: false }),
+    waitForChange: waitForSettingsChange,
   },
   config,
   context: window.SignalContext,

ts/windows/settings/preload.ts

@@ -246,7 +246,6 @@ const renderPreferences = async () => {
     selectedCamera,
     selectedMicrophone,
     selectedSpeaker,
-    theme: themeSetting === 'system' ? window.systemTheme : themeSetting,
     themeSetting,
     universalExpireTimer,
     whoCanFindMe,
@@ -360,7 +359,7 @@ const renderPreferences = async () => {
   );
 };
 
-ipcRenderer.on('render', () => renderPreferences());
+ipcRenderer.on('preferences-changed', () => renderPreferences());
 
 contextBridge.exposeInMainWorld('SignalWindow', {
   ...SignalWindow,

ts/windows/waitForSettingsChange.ts

@@ -0,0 +1,25 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { ipcRenderer as ipc } from 'electron';
+
+import { explodePromise } from '../util/explodePromise';
+
+let preferencesChangeResolvers = new Array<() => void>();
+
+ipc.on('preferences-changed', _event => {
+  const resolvers = preferencesChangeResolvers;
+  preferencesChangeResolvers = [];
+
+  for (const resolve of resolvers) {
+    resolve();
+  }
+});
+
+export function waitForSettingsChange(): Promise<void> {
+  const { promise, resolve } = explodePromise<void>();
+
+  preferencesChangeResolvers.push(resolve);
+
+  return promise;
+}