Merge pull request #1921 from vs4vijay/theme-auto-detection

automatically theme mode based on user preference

Author: a3957273

src/web/App.mjs

@@ -60,6 +60,7 @@ class App {
 
         this.initialiseSplitter();
         this.loadLocalStorage();
+        this.manager.options.applyPreferredColorScheme();
         this.populateOperationsList();
         this.manager.setup();
         this.manager.output.saveBombe();
@@ -536,6 +537,8 @@ class App {
         // Read in theme from URI params
         if (this.uriParams.theme) {
             this.manager.options.changeTheme(Utils.escapeHtml(this.uriParams.theme));
+        } else {
+            this.manager.options.applyPreferredColorScheme();
         }
 
         window.dispatchEvent(this.manager.statechange);

src/web/waiters/OptionsWaiter.mjs

@@ -163,6 +163,14 @@ class OptionsWaiter {
         themeSelect.selectedIndex = themeSelect.querySelector(`option[value="${theme}"`).index;
     }
 
+    /**
+     * Applies the user's preferred color scheme using the `prefers-color-scheme` media query.
+     */
+    applyPreferredColorScheme() {
+        const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        const theme = prefersDarkScheme ? "dark" : "classic";
+        this.changeTheme(theme);
+    }
 
     /**
      * Changes the console logging level.