Implement system theme preference

electron/index.js

@@ -1,6 +1,16 @@
 /* eslint-disable quotes,no-undef */
 
-const { app, BrowserWindow, Menu, MenuItem, ipcMain, shell, dialog, session } = require("electron");
+const {
+    app,
+    BrowserWindow,
+    Menu,
+    MenuItem,
+    ipcMain,
+    shell,
+    dialog,
+    session,
+    nativeTheme,
+} = require("electron");
 const path = require("path");
 const url = require("url");
 const fs = require("fs");
@@ -97,6 +107,10 @@ function createWindow() {
     win.webContents.session.clearCache();
     win.webContents.session.clearStorageData();
 
+    nativeTheme.on("updated", () => {
+        win.webContents.send("system-theme-updated");
+    });
+
     ////// SECURITY
 
     // Disable permission requests
@@ -381,6 +395,10 @@ ipcMain.handle("get-mods", async () => {
     return mods;
 });
 
+ipcMain.handle("get-system-theme", async () => {
+    return nativeTheme.shouldUseDarkColors ? "dark" : "light";
+});
+
 steam.init(isDev);
 
 // Only allow achievements and puzzle DLC if no mods are loaded

src/js/game/theme.js

@@ -4,7 +4,42 @@ export const THEMES = {
 };
 
 export let THEME = THEMES.light;
+let currentThemePreference = "light";
+
+THEMES.system = THEMES.light;
+ipcRenderer.on("system-theme-updated", detectSystemTheme);
+
+export function detectSystemTheme() {
+    return ipcRenderer
+        .invoke("get-system-theme")
+        .then(theme => (THEMES.system = THEMES[theme]))
+        .catch(() => (THEMES.system = THEMES.light))
+        .then(() => {
+            // Re-apply the theme, this only affects system
+            applyGameTheme();
+        });
+}
 
 export function applyGameTheme(id) {
-    THEME = THEMES[id];
+    if (id === undefined) {
+        id = currentThemePreference;
+    }
+
+    const isSystem = id === "system";
+    const themeId = isSystem ? THEMES.system.id : id;
+
+    if (!isSystem && id === undefined) {
+        // Re-applying light/dark themes is not needed
+        return;
+    }
+
+    if (document.body.id != "state_InGameState") {
+        // Only set the theme if not playing, otherwise this causes bugs
+        // Main menu re-applies the theme anyway
+        THEME = THEMES[themeId];
+        document.documentElement.setAttribute("data-theme", themeId);
+    }
+
+    // Keep the theme to re-apply system theme
+    currentThemePreference = id;
 }

src/js/game/themes/dark.json

@@ -1,4 +1,6 @@
 {
+    "id": "dark",
+
     "map": {
         "background": "#3e3f47",
         "gridRegular": "rgba(255, 255, 255, 0.02)",

src/js/game/themes/light.json

@@ -1,4 +1,6 @@
 {
+    "id": "light",
+
     "map": {
         "background": "#eceef2",
 

src/js/mods/mod_interface.js

@@ -399,6 +399,8 @@ export class ModInterface {
      */
     registerGameTheme({ id, name, theme }) {
         THEMES[id] = theme;
+        theme.id = id;
+
         this.registerTranslations("en", {
             settings: {
                 labels: {

src/js/profile/application_settings.js

@@ -6,7 +6,7 @@ import { ReadWriteProxy } from "../core/read_write_proxy";
 import { BoolSetting, EnumSetting, RangeSetting, BaseSetting } from "./setting_types";
 import { createLogger } from "../core/logging";
 import { ExplainedResult } from "../core/explained_result";
-import { THEMES, applyGameTheme } from "../game/theme";
+import { THEMES, applyGameTheme, detectSystemTheme } from "../game/theme";
 import { T } from "../translations";
 import { LANGUAGES } from "../languages";
 
@@ -209,14 +209,7 @@ function initializeSettings() {
             textGetter: theme => T.settings.labels.theme.themes[theme],
             category: enumCategories.userInterface,
             restartRequired: false,
-            changeCb:
-                /**
-                 * @param {Application} app
-                 */
-                (app, id) => {
-                    applyGameTheme(id);
-                    document.documentElement.setAttribute("data-theme", id);
-                },
+            changeCb: (app, id) => applyGameTheme(id),
             enabledCb: /**
              * @param {Application} app
              */ app => app.restrictionMgr.getHasExtendedSettings(),
@@ -298,7 +291,7 @@ class SettingsStorage {
         this.soundVolume = 1.0;
         this.musicVolume = 1.0;
 
-        this.theme = "light";
+        this.theme = "system";
         this.refreshRate = "60";
         this.scrollWheelSensitivity = "regular";
         this.movementSpeed = "regular";
@@ -344,6 +337,10 @@ export class ApplicationSettings extends ReadWriteProxy {
     initialize() {
         // Read and directly write latest data back
         return this.readAsync()
+            .then(() => {
+                // Make sure it's ready
+                return detectSystemTheme();
+            })
             .then(() => {
                 // Apply default setting callbacks
                 const settings = this.getAllSettings();

src/js/states/main_menu.js

@@ -16,6 +16,7 @@ import {
     waitNextFrame,
 } from "../core/utils";
 import { HUDModalDialogs } from "../game/hud/parts/modal_dialogs";
+import { detectSystemTheme } from "../game/theme";
 import { MODS } from "../mods/modloader";
 import { PlatformWrapperImplBrowser } from "../platform/browser/wrapper";
 import { PlatformWrapperImplElectron } from "../platform/electron/wrapper";
@@ -348,6 +349,9 @@ export class MainMenuState extends GameState {
             );
         }
 
+        // Apply the system theme if returning from InGameState
+        detectSystemTheme();
+
         if (G_IS_DEV && globalConfig.debug.testPuzzleMode) {
             this.onPuzzleModeButtonClicked(true);
             return;

src/js/states/preload.js

@@ -6,6 +6,7 @@ import { createLogger } from "../core/logging";
 import { getLogoSprite } from "../core/utils";
 import { getRandomHint } from "../game/hints";
 import { HUDModalDialogs } from "../game/hud/parts/modal_dialogs";
+import { detectSystemTheme } from "../game/theme";
 import { PlatformWrapperImplBrowser } from "../platform/browser/wrapper";
 import { autoDetectLanguageId, T, updateApplicationLanguage } from "../translations";
 
@@ -108,6 +109,7 @@ export class PreloadState extends GameState {
             .then(() => this.fetchDiscounts())
 
             .then(() => this.setStatus("Initializing settings", 20))
+            .then(() => detectSystemTheme())
             .then(() => {
                 return this.app.settings.initialize();
             })

translations/base-en.yaml

@@ -1267,6 +1267,7 @@ settings:
             themes:
                 dark: Dark
                 light: Light
+                system: System
 
         refreshRate:
             title: Tick Rate