Add system theme for Windows and Mac Electron builds

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 () {

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',

desktop/preload.js

@@ -60,4 +60,5 @@ contextBridge.exposeInMainWorld('electron', {
     }
   },
   isMac: process.platform === 'darwin',
+  isLinux: process.platform === 'linux',
 });

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>

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);

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;