Add switchable dark mode

libraries/jbox/jbox-dark.css

@@ -0,0 +1,12 @@
+.jBox-container {
+	background: #393b3a;
+	color:white;
+}
+
+.jBox-Modal .jBox-title,
+.jBox-Confirm .jBox-title {
+	background: #393b3a;
+	border-bottom: 1px solid #9c9c9c;
+    text-shadow: 0 1px 1px #fff;
+    color: white;
+}

locales/en/messages.json

@@ -4318,5 +4318,8 @@
     },
     "cliAutoComplete": {
         "message": "Advanced CLI AutoComplete"
+    },
+    "darkTheme": {
+        "message": "Enable dark theme"
     }
 }

src/css/main-dark.css

@@ -0,0 +1,108 @@
+body {
+    color: white;
+}
+
+a {
+    color: #ffc549;
+}
+
+#options-window {
+    background-color: #393b3a;
+}
+
+#content {
+    background-color:#393b3a;
+}
+
+#content.logopen {
+    background-color: #393b3a;
+}
+
+#status-bar {
+    background-color: #414443;
+}
+
+#status-bar div {
+    border-right: 1px solid #9c9c9c;
+}
+
+dialog {
+    background-color: #3a3d3c;
+    color:white;
+    border: 1px solid #ffbb2a;
+}
+
+/* Note */
+.note {
+    background-color: #656565;
+    color: white;
+}
+
+.content_toolbar {
+    background-color: #555857;
+    border-top: 1px solid #9c9c9c;
+}
+
+.content_toolbar .btn a {
+    border: 1px solid #ffbb2a;
+}
+
+.content_toolbar .btn a.disabled {
+    border: 1px solid #ffbb2a;
+}
+
+.gui_box {
+    border: 1px solid #9c9c9c;
+    background-color: #393b3a;
+}
+
+.gui_warning {
+    background: #393b3a;
+}
+
+.gui_note {
+    background: #393b3a;
+}
+
+.grey {
+    background-color: #414443
+}
+
+.gui_box_titlebar {
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.gui_box_bottombar {
+    background-color: #393b3a;
+}
+
+.fixed_band {
+    background-color: #393b3a;
+}
+
+.default_btn a.disabled {
+    background-color: #393b3a;
+    border: 1px solid #ffbb2a;
+}
+
+.small a {
+    border: 1px solid #ffbb2a;
+}
+
+.cf_table td {
+    border-bottom: solid 1px #9c9c9c;
+}
+
+
+.dataflash-contents_global {
+    border: 1px solid #ffbb2a;
+}
+
+#quad-status_wrapper {
+    color: #393b3a;
+}
+
+button {
+    border: 1px solid #ffbb2a;
+}

src/css/tabs-dark/adjustments-dark.css

@@ -0,0 +1,18 @@
+.tab-adjustments .adjustments thead td {
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.tab-adjustments .adjustment:nth-child(odd) {
+    background-color: #393b3a;
+}
+
+.tab-adjustments .adjustments {
+    background-color: #393b3a;
+}
+
+.tab-adjustments .adjustment select {
+    border: 1px solid silver; 
+    background-color: #3a3a3a;
+    color: white;
+}

src/css/tabs-dark/auxiliary-dark.css

@@ -0,0 +1,40 @@
+.tab-auxiliary .toolbox {
+    color: white;
+}
+
+.tab-auxiliary .mode {
+    background-color: #393b3a;
+}
+
+.tab-auxiliary .mode .info {
+    background-color: #9e9e9e;
+    color: white;
+}
+
+.tab-auxiliary .ranges {
+    border-bottom: 5px solid #8a8a8a;
+    background-color: #676767;
+}
+
+.tab-auxiliary .range {
+    background-color: #484848;
+}
+
+.tab-auxiliary .link {
+    background-color: #484848;
+}
+
+.tab-auxiliary .range .channel {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-auxiliary .buttons a {
+    background-color: #333333;
+    color: white;
+}
+
+.tab-auxiliary .buttons a:hover {
+    background-color: #393b3a;
+}

src/css/tabs-dark/cli-dark.css

@@ -0,0 +1,17 @@
+.tab-cli p {
+    border: 0px dotted #9c9c9c;
+}
+
+.tab-cli .backdrop {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-cli textarea[name='commands'] {
+    border: 1px solid #9c9c9c;
+}
+
+/* AutoComplete */
+.cli-textcomplete-dropdown {
+    border: 1px solid #9c9c9c;
+    background-color: #393b3a;
+}

src/css/tabs-dark/configuration-dark.css

@@ -0,0 +1,123 @@
+.tab-configuration table th {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-configuration table td {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-configuration .groupTitle {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-configuration .mixerList {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-configuration .number input {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-configuration .gps select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-configuration .disarm .checkbox {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-configuration .disarm {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.disarmdelay {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-configuration .number,
+.tab-configuration .select
+ {
+    border-bottom: 1px solid #9c9c9c;
+ }
+
+.tab-configuration .board_align_inputs input {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-configuration .selectProtocol
+{
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-configuration select.batterymetertype {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-configuration .currentmetertype {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-configuration .serialRX, .spiRx, .rxMode {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-configuration .mixerPreview {
+    background-color: #393b3a;
+}
+
+.tab-configuration .gui_box span {
+    color: white;
+}
+
+.tab-configuration .board select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+#mixercontent select {
+    border: 1px solid #9c9c9c;
+}
+
+#mixercontent input {
+    border: 1px solid #9c9c9c;
+}
+
+#mixercontent .mixerletter {
+    background-color: #393b3a;
+}
+
+#mixercontent .number {
+    border-top: 1px solid #9c9c9c;
+}
+
+#mixercontent .mixercanvas {
+    background-color: #393b3a;
+    border: 1px solid #9c9c9c;
+}
+
+.tab-configuration .board_align_content,
+.tab-configuration .gyro_align_content {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-configuration .escprotocol {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-configuration .gyroSyncDenom, .tab-configuration .pidProcessDenom {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}

src/css/tabs-dark/failsafe-dark.css

@@ -0,0 +1,47 @@
+.tab-failsafe .number input {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-failsafe .number input:disabled {
+    background-color: #393b3a;
+    color: grey;
+}
+
+.tab-failsafe .checkbox {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-failsafe .radioarea {
+    background-color: #393b3a;
+}
+
+.tab-failsafe .number {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-failsafe .gui_box span {
+    color: white;
+}
+
+.tab-failsafe .stage1 select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-failsafe .modename {
+    background-color: #393b3a;
+    border: 1px solid #9c9c9c;
+}
+
+.tab-failsafe .featuresNew tr {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-failsafe .switchMode {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}