Fix forced dark mode if dark mode on OS level (#1686)

Fix forced dark mode if dark mode on OS level

Author: mikeller

locales/en/messages.json

@@ -14,6 +14,15 @@
         "message": "No",
         "description": "General No message to be used across the application"
     },
+    "on": {
+        "message": "On"
+    },
+    "off": {
+        "message": "Off"
+    },
+    "auto": {
+        "message": "Auto"
+    },
     "error": {
         "message": "Error: {{errorMessage}}"
     },

src/css/main.css

@@ -455,7 +455,11 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 #options-window select {
-    margin-right: 3em;
+    margin-right: 2px;
+    background: var(--boxBackground);
+    color: var(--defaultText);
+    border: 1px solid var(--subtleAccent);
+    border-radius: 3px;
 }
 
 #options-window span {

src/js/DarkTheme.js

@@ -27,14 +27,14 @@ var css_dark = [
 ]
 
 var DarkTheme = {
-    configEnabled: false,
+    configEnabled: undefined,
 };
 
 DarkTheme.setConfig = function(result) {
     if (this.configEnabled != result) {
         this.configEnabled = result;
 
-        if (this.configEnabled) {
+        if (this.configEnabled === 0 || this.configEnabled === 2 && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
             this.applyDark();
         } else {
             this.applyNormal();

src/js/main.js

@@ -390,13 +390,13 @@ function startProcess() {
                         CliAutoComplete.setEnabled(checked);
                     }).change();
 
-                $('div.darkTheme input')
-                    .prop('checked', DarkTheme.configEnabled)
+                $('#darkThemeSelect')
+                    .val(DarkTheme.configEnabled)
                     .change(function () {
-                        var checked = $(this).is(':checked');
+                        var value = parseInt($(this).val());
 
-                        ConfigStorage.set({'darkTheme': checked});
-                        setDarkTheme(checked);
+                        ConfigStorage.set({'darkTheme': value});
+                        setDarkTheme(value);
                     }).change();
 
                 function close_and_cleanup(e) {
@@ -548,7 +548,12 @@ function startProcess() {
     });
 
     ConfigStorage.get('darkTheme', function (result) {
-        setDarkTheme(result.darkTheme);
+        if (result.darkTheme === undefined || typeof result.darkTheme !== "number") {
+            // sets dark theme to auto if not manually changed
+            setDarkTheme(2);
+        } else {
+            setDarkTheme(result.darkTheme);
+        }
     });
 };
 

src/main.html

@@ -62,33 +62,6 @@
     <link type="text/css" rel="stylesheet" href="./css/tabs-dark/power-dark.css" media="all" disabled/>
     <link type="text/css" rel="stylesheet" href="./css/tabs-dark/transponder-dark.css" media="all" disabled/>
 
-    <!-- Chrome 76 supports dark mode at the OS level -->
-    <style type="text/css">
-        @import url(./css/main-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/landing-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/setup-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/help-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/ports-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/configuration-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/pid_tuning-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/receiver-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/servos-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/gps-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/motors-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/led_strip-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/sensors-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/cli-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/logging-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/onboard_logging-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/firmware_flasher-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/adjustments-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/auxiliary-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/failsafe-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/osd-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/power-dark.css) (prefers-color-scheme: dark);
-        @import url(./css/tabs-dark/transponder-dark.css) (prefers-color-scheme: dark);
-    </style>
-
     <script type="text/javascript" src="./node_modules/lru_map/lru.js"></script>
     <script type="text/javascript" src="./node_modules/i18next/i18next.min.js"></script>
     <script type="text/javascript" src="./node_modules/i18next-xhr-backend/i18nextXHRBackend.min.js"></script>

src/tabs/options.html

@@ -14,5 +14,10 @@
     <label><input type="checkbox" /><span i18n="cliAutoComplete"></span></label>
 </div>
 <div class="darkTheme">
-    <label><input type="checkbox" /><span i18n="darkTheme"></span></label>
+    <select id="darkThemeSelect">
+        <option value="0" i18n="on"></option>
+        <option value="1" i18n="off"></option>
+        <option value="2" i18n="auto"></option>
+    </select>
+    <span i18n="darkTheme"></span>
 </div>