Merge pull request #2165 from WalcoFPV/cordova-themedetection-plugin

Fixed auto dark theme on android

cordova/package_template.json

@@ -25,6 +25,7 @@
     "cordova-plugin-splashscreen": "^5.0.3",
     "cordova-plugin-usb-event": "^1.0.2",
     "cordova-plugin-whitelist": "^1.3.4",
+    "cordova-plugin-theme-detection": "^1.2.1",
     "bf-cordovarduino": "^1.0.0"
   },
   "cordova": {
@@ -48,6 +49,7 @@
       "cordova-plugin-screen-orientation": {},
       "cordova-plugin-market": {},
       "bf-cordova-open-native-settings": {},
+      "cordova-plugin-theme-detection": {},
       "bf-cordova-plugin-appavailability": {}
     }
   }

cordova/yarn.lock

@@ -675,6 +675,11 @@ cordova-plugin-splashscreen@^5.0.3:
   resolved "https://registry.yarnpkg.com/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-5.0.3.tgz#02820472771c3e10b43ceedd54b0a1e4674efa6d"
   integrity sha512-rnoDXMDfzoeHDBvsnu6JmzDE/pV5YJCAfc5hYX/Mb2BIXGgSjFJheByt0tU6kp3Wl40tSyFX4pYfBwFblBGyRg==
 
+cordova-plugin-theme-detection@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/cordova-plugin-theme-detection/-/cordova-plugin-theme-detection-1.2.1.tgz#8ff887a27fd25d497e82660c971b26086a3c54f6"
+  integrity sha512-UsvXFKbbBqLuFkk6cQ1s+uIvLvXxNN3y4zwgBmTr5JwzCf8HlrHH4f6IWTsLLfRIsbfM6KdO7xvQ5EwDgS1LhQ==
+
 cordova-plugin-usb-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/cordova-plugin-usb-event/-/cordova-plugin-usb-event-1.0.2.tgz#68182ae8d56d42236524753a1dbb711ce285e03a"

src/js/DarkTheme.js

@@ -8,20 +8,39 @@ var DarkTheme = {
     configEnabled: undefined,
 };
 
-DarkTheme.isDarkThemeEnabled = function (val) {
-    return val === 0 || val === 2 && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+DarkTheme.isDarkThemeEnabled = function (callback) {
+    if (this.configEnabled === 0) {
+        callback(true);
+    } else if (this.configEnabled === 2) {
+        if (GUI.isCordova()) {
+            cordova.plugins.ThemeDetection.isDarkModeEnabled(function(success) {
+                callback(success.value);
+            }, function(error) {
+                console.log(`cordova-plugin-theme-detection: ${error}`);
+                callback(false);
+            });
+        } else {
+            const isEnabled = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+            callback(isEnabled);
+        }
+    } else {
+        callback(false);
+    }
 };
 
 DarkTheme.apply = function() {
-    if (this.isDarkThemeEnabled(this.configEnabled)) {
-        this.applyDark();
-    } else {
-        this.applyNormal();
-    }
+    const self = this;
+    this.isDarkThemeEnabled(function(isEnabled) {
+        if (isEnabled) {
+            self.applyDark();
+        } else {
+            self.applyNormal();
+        }
 
-    if (chrome.app.window !== undefined) {
-        windowWatcherUtil.passValue(chrome.app.window.get("receiver_msp"), 'darkTheme', this.isDarkThemeEnabled(this.configEnabled));
-    }
+        if (chrome.app.window !== undefined) {
+            windowWatcherUtil.passValue(chrome.app.window.get("receiver_msp"), 'darkTheme', isEnabled);
+        }
+    });
 };
 
 DarkTheme.autoSet = function() {
@@ -31,7 +50,7 @@ DarkTheme.autoSet = function() {
 };
 
 DarkTheme.setConfig = function (result) {
-    if (this.configEnabled != result) {
+    if (this.configEnabled !== result) {
         this.configEnabled = result;
         this.apply();
     }

src/js/main.js

@@ -514,9 +514,22 @@ function startProcess() {
             setDarkTheme(result.darkTheme);
         }
     });
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function() {
-        DarkTheme.autoSet();
-    });
+    if (GUI.isCordova()) {
+        let darkMode = false;
+        const checkDarkMode = function() {
+            cordova.plugins.ThemeDetection.isDarkModeEnabled(function(success) {
+                if (success.value !== darkMode) {
+                    darkMode = success.value;
+                    DarkTheme.autoSet();
+                }
+            });
+        };
+        setInterval(checkDarkMode, 500);
+    } else {
+        window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function() {
+            DarkTheme.autoSet();
+        });
+    }
 }
 
 function setDarkTheme(enabled) {