Add listener for changed ui theme

src/main/Application.ts

@@ -1,6 +1,9 @@
 import {
     app,
+    ipcMain,
     shell,
+    systemPreferences,
+    Event,
     Menu,
 } from 'electron'
 import {
@@ -22,10 +25,21 @@ export default class Application {
         return this._instance || (this._instance = new this())
     }
 
+    public isDarkMode: boolean
+
     private constructor() {
+        this.isDarkMode = systemPreferences.isDarkMode()
+
         app.on('window-all-closed', () => this.onWindowAllClosed())
         app.on('ready', () => this.onReady())
         app.on('activate', () => this.onActivated())
+
+        systemPreferences.subscribeNotification('AppleInterfaceThemeChangedNotification', () => {
+            this.isDarkMode = systemPreferences.isDarkMode()
+            Window.windowMap.forEach(win => {
+                win.webContents.send('change-color-theme')
+            })
+        })
     }
 
     public setApplicationMenu(menu: Menu) {
@@ -52,6 +66,8 @@ export default class Application {
         Timeline.ready()
         Streaming.ready()
 
+        ipcMain.on('dark-theme', (e: Event) => e.returnValue = this.isDarkMode)
+
         Window.Main()
     }
 

src/views/App.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { remote } from 'electron'
+import { ipcRenderer } from 'electron'
 import { Component, Vue } from 'vue-property-decorator'
 import Welcome from '@/components/Welcome.vue'
 
@@ -15,20 +15,23 @@ import Welcome from '@/components/Welcome.vue'
   },
 })
 export default class App extends Vue {
-  public color: string = this.isDarkMode ? 'white' : 'black'
+  private isDarkMode: boolean = ipcRenderer.sendSync('dark-theme')
-  public backgroundColor: string = this.isDarkMode ? '#212121' : 'white'
   public fontSize: string = '16px'
 
   public get styles(): { [key: string]: string } {
     return {
-      '--color': this.color,
+      '--color': this.isDarkMode ? 'white' : 'black',
-      '--bg-color': this.backgroundColor,
+      '--bg-color': this.isDarkMode ? '#212121' : 'white',
       '--font-size': this.fontSize,
     }
   }
 
-  public get isDarkMode(): boolean {
+  beforeDestroy() {
-    return remote.systemPreferences.isDarkMode()
+    ipcRenderer.eventNames().forEach(name => ipcRenderer.removeAllListeners(name))
+  }
+
+  mounted() {
+    ipcRenderer.on('change-color-theme', () => this.isDarkMode = ipcRenderer.sendSync('dark-theme'))
   }
 }
 </script>