From c2bad0b0a921ef2fccb787df810f257328d4ee69 Mon Sep 17 00:00:00 2001
From: Vishwanath Martur <64204611+vishwamartur@users.noreply.github.com>
Date: Tue, 17 Dec 2024 22:03:15 +0530
Subject: [PATCH] Add auto dark/light theme switch based on OS preference

Related to #825

Add automatic theme switching based on OS preference

* Add logic in `src/mixins/ThemingMixin.js` to detect OS theme preference using `window.matchMedia`.
* Update `initializeTheme` method in `src/mixins/ThemingMixin.js` to set theme based on OS preference.
* Modify `applyLocalTheme` method in `src/mixins/ThemingMixin.js` to apply the detected theme dynamically.
* Include logic in `src/App.vue` to detect and apply theme based on OS preference during app initialization.
---
 src/App.vue                | 10 ++++++++++
 src/mixins/ThemingMixin.js |  8 ++++++++
 2 files changed, 18 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index a752977607..3ec5a05472 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -155,11 +155,21 @@ export default {
       e.preventDefault();
       return 'You may have unsaved edits. Are you sure you want to exit the page?';
     },
+    /* Detect and apply theme based on OS preference */
+    applyThemeBasedOnOSPreference() {
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const osTheme = prefersDark ? this.appConfig.nightTheme : this.appConfig.dayTheme;
+      if (osTheme) {
+        this.$store.commit(Keys.SET_THEME, osTheme);
+        this.updateTheme(osTheme);
+      }
+    },
   },
   /* Basic initialization tasks on app load */
   async mounted() {
     await this.$store.dispatch(Keys.INITIALIZE_CONFIG); // Initialize config before moving on
     this.applyLanguage(); // Apply users local language
+    this.applyThemeBasedOnOSPreference(); // Apply theme based on OS preference
     this.hideSplash(); // Hide the splash screen, if visible
     if (this.appConfig.customCss) { // Inject users custom CSS, if present
       const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
diff --git a/src/mixins/ThemingMixin.js b/src/mixins/ThemingMixin.js
index 64e21e7d7f..7659f351c4 100644
--- a/src/mixins/ThemingMixin.js
+++ b/src/mixins/ThemingMixin.js
@@ -136,6 +136,14 @@ const ThemingMixin = {
       } else if (hasExternal) {
         this.applyRemoteTheme(this.externalThemes[initialTheme]);
       }
+
+      // Detect OS theme preference and apply the corresponding theme
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const osTheme = prefersDark ? this.appConfig.nightTheme : this.appConfig.dayTheme;
+      if (osTheme) {
+        this.$store.commit(Keys.SET_THEME, osTheme);
+        this.updateTheme(osTheme);
+      }
     },
   },
 };