Set the application's dark mode to follow the app settings on macOS. (#10186)

app/lib/window.ts

@@ -1,7 +1,7 @@
 import * as glasstron from 'glasstron'
 import { autoUpdater } from 'electron-updater'
 import { Subject, Observable, debounceTime } from 'rxjs'
-import { BrowserWindow, app, ipcMain, Rectangle, Menu, screen, BrowserWindowConstructorOptions, TouchBar, nativeImage, WebContents } from 'electron'
+import { BrowserWindow, app, ipcMain, Rectangle, Menu, screen, BrowserWindowConstructorOptions, TouchBar, nativeImage, WebContents, nativeTheme } from 'electron'
 import ElectronConfig = require('electron-config')
 import { enable as enableRemote } from '@electron/remote/main'
 import * as os from 'os'
@@ -115,6 +115,8 @@ export class Window {
                 this.setVibrancy(true)
             }
 
+            this.setDarkMode(this.configStore.appearance?.colorSchemeMode ?? 'dark')
+
             if (!options.hidden) {
                 if (maximized) {
                     this.window.maximize()
@@ -201,6 +203,18 @@ export class Window {
         }
     }
 
+    setDarkMode (mode: string): void {
+        if (process.platform === 'darwin') {
+            if ('light' === mode ) {
+                nativeTheme.themeSource = 'light'
+            } else if ('auto' === mode) {
+                nativeTheme.themeSource = 'system'
+            } else {
+                nativeTheme.themeSource = 'dark'
+            }
+        }
+    }
+
     focus (): void {
         this.window.focus()
     }
@@ -373,6 +387,10 @@ export class Window {
             this.setVibrancy(enabled, type)
         })
 
+        this.on('window-set-dark-mode', (_, mode) => {
+            this.setDarkMode(mode)
+        })
+
         this.on('window-set-window-controls-color', (_, theme) => {
             if (process.platform === 'win32') {
                 const symbolColor: string = theme.foreground

tabby-electron/src/index.ts

@@ -130,7 +130,10 @@ export default class ElectronModule {
             })
         })
 
-        config.changed$.subscribe(() => this.updateVibrancy())
+        config.changed$.subscribe(() => {
+            this.updateVibrancy()
+            this.updateDarkMode()
+        })
 
         config.changed$.subscribe(() => this.updateWindowControlsColor())
 
@@ -173,6 +176,11 @@ export default class ElectronModule {
         this.hostWindow.setOpacity(this.config.store.appearance.opacity)
     }
 
+    private updateDarkMode () {
+        const colorSchemeMode = this.config.store.appearance.colorSchemeMode
+        this.electron.ipcRenderer.send('window-set-dark-mode', colorSchemeMode)
+    }
+
     private updateWindowControlsColor () {
         // if windows and not using native frame, WCO does not exist, return.
         if (this.hostApp.platform === Platform.Windows && this.config.store.appearance.frame === 'native') {