diff --git a/cordova/package_template.json b/cordova/package_template.json index e4f5a576c2..e8192d31d9 100644 --- a/cordova/package_template.json +++ b/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": {} } } diff --git a/cordova/yarn.lock b/cordova/yarn.lock index f630f2fd80..6702fe8984 100644 --- a/cordova/yarn.lock +++ b/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" diff --git a/src/js/DarkTheme.js b/src/js/DarkTheme.js index 31303d84f5..c4172da74a 100644 --- a/src/js/DarkTheme.js +++ b/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(); } diff --git a/src/js/main.js b/src/js/main.js index 9ee5f7389d..c11f215583 100644 --- a/src/js/main.js +++ b/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) {