Add system theme for Windows and Mac Electron builds (#2882)

Picked up from PR #2135 Currently in our Electron builds we don't offer a system theme that responds to the OSs color preference but is available in the web app. This enables it for both Windows and Mac builds. There appears to be a bug in Electron or Chromium on Linux that the app doesn't respond properly to changing the color preferences so it still won't work there. Possibly this will get resolved in Electron 13 due to come out May 25, 2021. It also updates so that the system menu for Windows updates to be the choice of theme in Simplenote itself. So if you specifically choose Light the menu will be light, same for dark, overriding the system color preference. This semi addresses issues #2134 and #1799 as they will both be resolved for Mac and Windows, but still not working on the Linux builds.
Automattic · May 1, 2021 · 54ca503 · 54ca503
1 parent 3348bd1
commit 54ca503
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 14 deletions.
diff --git a/desktop/app.js b/desktop/app.js
@@ -7,6 +7,7 @@ const {
   shell,
   Menu,
   session,
+  nativeTheme,
 } = require('electron');
 
 const path = require('path');
@@ -102,6 +103,7 @@ module.exports = function main() {
       Menu.setApplicationMenu(
         Menu.buildFromTemplate(createMenuTemplate(args), mainWindow)
       );
+      nativeTheme.themeSource = settings.theme;
     });
 
     ipcMain.on('clearCookies', function () {

diff --git a/desktop/menus/view-menu.js b/desktop/menus/view-menu.js
@@ -5,6 +5,22 @@ const buildViewMenu = (settings, isAuthenticated) => {
   settings = settings || {};
   isAuthenticated = isAuthenticated || false;
 
+  const themeSubMenu = [];
+  if (!platform.isLinux()) {
+    themeSubMenu.push({
+      label: '&System',
+      id: 'system',
+    });
+  }
+  themeSubMenu.push({
+    label: '&Light',
+    id: 'light',
+  });
+  themeSubMenu.push({
+    label: '&Dark',
+    id: 'dark',
+  });
+
   const menu = {
     label: '&View',
     submenu: [
@@ -107,16 +123,7 @@ const buildViewMenu = (settings, isAuthenticated) => {
       {
         label: 'T&heme',
         visible: isAuthenticated,
-        submenu: [
-          {
-            label: '&Light',
-            id: 'light',
-          },
-          {
-            label: '&Dark',
-            id: 'dark',
-          },
-        ].map(
+        submenu: themeSubMenu.map(
           buildRadioGroup({
             action: 'activateTheme',
             propName: 'theme',

diff --git a/desktop/preload.js b/desktop/preload.js
@@ -60,4 +60,5 @@ contextBridge.exposeInMainWorld('electron', {
     }
   },
   isMac: process.platform === 'darwin',
+  isLinux: process.platform === 'linux',
 });
diff --git a/lib/dialogs/settings/panels/display.tsx b/lib/dialogs/settings/panels/display.tsx
@@ -1,7 +1,7 @@
 import React, { Fragment, FunctionComponent } from 'react';
 import { connect } from 'react-redux';
 
-import { isElectron, isMac } from '../../../utils/platform';
+import { isElectron, isLinux, isMac } from '../../../utils/platform';
 import RadioGroup from '../../radio-settings-group';
 import SettingsGroup, { Item } from '../../settings-group';
 import ToggleGroup from '../../toggle-settings-group';
@@ -131,9 +131,7 @@ const DisplayPanel: FunctionComponent<Props> = (props) => (
       onChange={props.setActiveTheme}
       renderer={RadioGroup}
     >
-      {navigator.userAgent.toLowerCase().indexOf(' electron/') === -1 && (
-        <Item title="System" slug="system" />
-      )}
+      {!isLinux && <Item title="System" slug="system" />}
       <Item title="Light" slug="light" />
       <Item title="Dark" slug="dark" />
     </SettingsGroup>

diff --git a/lib/global.d.ts b/lib/global.d.ts
@@ -10,6 +10,7 @@ declare global {
     electron: {
       confirmLogout(changes: string): 'logout' | 'reconsider' | 'export';
       isMac: boolean;
+      isLinux: boolean;
       receive(command: 'appCommand', callback: (event: any) => any);
       receive(command: 'editorCommand', callback: (event: any) => any);
       receive(command: 'noteImportChannel', callback: (event: any) => any);

diff --git a/lib/utils/platform.ts b/lib/utils/platform.ts
@@ -10,3 +10,7 @@ export const CmdOrCtrl = isElectron && isMac ? 'Cmd' : 'Ctrl';
 export const isSafari = /^((?!chrome|android).)*safari/i.test(
   window.navigator.userAgent
 );
+
+export const isLinux = isElectron
+  ? window?.electron?.isLinux
+  : navigator.appVersion.indexOf('Linux') !== -1;
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,4 +60,5 @@ contextBridge.exposeInMainWorld('electron', { @@
         }
       },
       isMac: process.platform === 'darwin',
+      isLinux: process.platform === 'linux',
     });