From f397cbcd2d9e4d70c2ffbbe6da8a9816bc8153f7 Mon Sep 17 00:00:00 2001
From: IvoFPV <ogzerr1@gmail.com>
Date: Tue, 24 Sep 2019 12:14:09 +0200
Subject: [PATCH] Fix forced dark mode if dark mode on OS level

---
 locales/en/messages.json |  9 +++++++++
 src/css/main.css         |  6 +++++-
 src/js/DarkTheme.js      |  4 ++--
 src/js/main.js           | 17 +++++++++++------
 src/main.html            | 27 ---------------------------
 src/tabs/options.html    |  7 ++++++-
 6 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/locales/en/messages.json b/locales/en/messages.json
index 5cd003fc..0ab9ab15 100644
--- a/locales/en/messages.json
+++ b/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}}"
     },
diff --git a/src/css/main.css b/src/css/main.css
index c86f18a1..814c43dc 100644
--- a/src/css/main.css
+++ b/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 {
diff --git a/src/js/DarkTheme.js b/src/js/DarkTheme.js
index f3752ec5..8748be47 100644
--- a/src/js/DarkTheme.js
+++ b/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();
diff --git a/src/js/main.js b/src/js/main.js
index d2deb2d0..46415367 100644
--- a/src/js/main.js
+++ b/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);
+        }
     });
 };
 
diff --git a/src/main.html b/src/main.html
index 6ca698c4..e34936de 100644
--- a/src/main.html
+++ b/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>
diff --git a/src/tabs/options.html b/src/tabs/options.html
index ab25c276..1c0048b8 100644
--- a/src/tabs/options.html
+++ b/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>