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

automatically theme mode based on user preference
gchq · Feb 16, 2025 · 9ab990f · 9ab990f
2 parents fb8e1be + feaf3dd
commit 9ab990f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/web/App.mjs b/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);

diff --git a/src/web/waiters/OptionsWaiter.mjs b/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.