fix: dark mode not toggling with system (#515)

Author: codebytere

main.js

@@ -1,4 +1,4 @@
-const { ipcMain, app } = require('electron');
+const { ipcMain, app, nativeTheme } = require('electron');
 const { menubar } = require('menubar');
 const { autoUpdater } = require('electron-updater');
 const { onFirstRunMaybe } = require('./first-run');
@@ -54,6 +54,14 @@ menubarApp.on('ready', () => {
 
   autoUpdater.checkForUpdatesAndNotify();
 
+  nativeTheme.on('updated', () => {
+    if (nativeTheme.shouldUseDarkColors) {
+      menubarApp.window.webContents.send('update-native-theme', 'DARK');
+    } else {
+      menubarApp.window.webContents.send('update-native-theme', 'LIGHT');
+    }
+  });
+
   ipcMain.on('reopen-window', () => menubarApp.showWindow());
   ipcMain.on('app-quit', () => menubarApp.app.quit());
   ipcMain.on('update-icon', (_, arg) => {

src/routes/Settings.tsx

@@ -11,13 +11,20 @@ import { IconAddAccount } from '../icons/AddAccount';
 import { IconLogOut } from '../icons/Logout';
 import { IconQuit } from '../icons/Quit';
 import { updateTrayIcon } from '../utils/comms';
+import { setAppearance } from '../utils/appearance';
 
 const isLinux = remote.process.platform === 'linux';
 
 export const SettingsRoute: React.FC = () => {
   const { settings, updateSetting, logout } = useContext(AppContext);
   const history = useHistory();
 
+  ipcRenderer.on('update-native-theme', (_, updatedAppearance: Appearance) => {
+    if (settings.appearance === Appearance.SYSTEM) {
+      setAppearance(updatedAppearance);
+    }
+  });
+
   const logoutUser = useCallback(() => {
     logout();
     history.goBack();