diff --git a/main.js b/main.js index 44af2e6c8..23346e905 100644 --- a/main.js +++ b/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) => { diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index f0cdb8fba..e15e2316a 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -11,6 +11,7 @@ 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'; @@ -18,6 +19,12 @@ 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();