DarkTheme auto change when prefers color scheme change

src/js/DarkTheme.js

@@ -12,18 +12,28 @@ DarkTheme.isDarkThemeEnabled = function (val) {
     return val === 0 || val === 2 && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 };
 
+DarkTheme.apply = function() {
+    if (this.isDarkThemeEnabled(this.configEnabled)) {
+        this.applyDark();
+    } else {
+        this.applyNormal();
+    }
+
+    if (chrome.app.window !== undefined) {
+        windowWatcherUtil.passValue(chrome.app.window.get("receiver_msp"), 'darkTheme', this.isDarkThemeEnabled(this.configEnabled));
+    }
+};
+
+DarkTheme.autoSet = function() {
+    if (this.configEnabled === 2) {
+        this.apply();
+    }
+};
+
 DarkTheme.setConfig = function (result) {
     if (this.configEnabled != result) {
         this.configEnabled = result;
-
+        this.apply();
-        if (this.isDarkThemeEnabled(this.configEnabled)) {
-            this.applyDark();
-        } else {
-            this.applyNormal();
-        }
-
-        windowWatcherUtil.passValue(chrome.app.window.get("receiver_msp"), 'darkTheme', this.isDarkThemeEnabled(this.configEnabled));
-
     }
 };
 

src/js/main.js

@@ -501,6 +501,9 @@ function startProcess() {
             setDarkTheme(result.darkTheme);
         }
     });
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function() {
+        DarkTheme.autoSet();
+    });
 }
 
 function setDarkTheme(enabled) {