add system light/dark mode override

src/main/base/browserwindow.ts

@@ -1,5 +1,5 @@
 import { join } from "path";
-import { app, BrowserWindow as bw, ipcMain, ShareMenu, shell, screen, dialog } from "electron";
+import { app, BrowserWindow as bw, ipcMain, ShareMenu, shell, screen, dialog, nativeTheme } from "electron";
 import * as windowStateKeeper from "electron-window-state";
 import * as express from "express";
 import * as getPort from "get-port";
@@ -442,6 +442,8 @@ export class BrowserWindow {
         break;
     }
     
+    nativeTheme.themeSource = utils.getStoreValue("visual.overrideDisplayTheme")
+
     // Start the webserver for the browser window to load
     // LocalFiles.DB.init()
     this.startWebServer();
@@ -1138,6 +1140,11 @@ export class BrowserWindow {
       BrowserWindow.win.setBounds({ x, y });
     });
 
+    // Override light, dark
+    ipcMain.on("changeDisplayTheme", (event, theme) => {
+      nativeTheme.themeSource = theme
+    });
+
     //Fullscreen
     ipcMain.on("setFullScreen", (_event, flag) => {
       BrowserWindow.win.setFullScreen(flag);

src/main/base/store.ts

@@ -200,6 +200,7 @@ export class Store {
       accentColor: "#fc3c44",
       purplePodcastPlaybackBar: false,
       maxElementScale: -1, // -1 default, anything else is a custom scale
+      overrideDisplayTheme : "system" // system , dark, light
     },
     lyrics: {
       enable_mxm: true,

src/renderer/views/components/settings-window.ejs

@@ -471,6 +471,22 @@
                                         </label>
                                     </div>
                                 </div>
+                                <div class="md-option-line">
+                                    <div class="md-option-segment">
+                                        {{'Display Style'}}
+                                    </div>
+                                    <div class="md-option-segment md-option-segment_auto">
+                                        <label>
+                                            <select class="md-select"
+                                                    v-model="$root.cfg.visual.overrideDisplayTheme"
+                                                    @change="changeDisplayTheme">
+                                                <option value="system">System</option>
+                                                <option value="dark">Dark</option>
+                                                <option value="light">Light</option>
+                                            </select>
+                                        </label>
+                                    </div>
+                                </div>
                                 <div class="md-option-line">
                                     <div class="md-option-segment">
                                         {{$root.getLz('settings.option.visual.windowBackgroundStyle')}}
@@ -1442,6 +1458,9 @@
       openAppData() {
         ipcRenderer.send('open-appdata')
       },
+      changeDisplayTheme(){
+        ipcRenderer.send('changeDisplayTheme',app.cfg.visual.overrideDisplayTheme)
+      },
       getLanguages: function() {
         let langs = this.$root.lzListing
         let categories = {