From e484d426fe81c11218601262036efa9abf119759 Mon Sep 17 00:00:00 2001
From: Vijay Soni <vs4vijay@gmail.com>
Date: Mon, 7 Oct 2024 01:28:46 +0530
Subject: [PATCH] automatically theme mode based on user preference

Related to #1901

Implemented automatic dark theme change based on user preference using the `prefers-color-scheme` media query.
---
 src/web/App.mjs                   | 3 +++
 src/web/waiters/OptionsWaiter.mjs | 8 ++++++++
 2 files changed, 11 insertions(+)
 mode change 100755 => 100644 src/web/App.mjs
 mode change 100755 => 100644 src/web/waiters/OptionsWaiter.mjs

diff --git a/src/web/App.mjs b/src/web/App.mjs
old mode 100755
new mode 100644
index 3ebfe1be9c..7071854ac7
--- 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
old mode 100755
new mode 100644
index f513413330..4f4eda89b5
--- 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.