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;
+}

src/css/tabs-dark/firmware_flasher-dark.css

@@ -0,0 +1,30 @@
+.tab-firmware_flasher .info .progress {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-firmware_flasher .options select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-firmware_flasher .options .description {
+    color: #b9b9b9;
+}
+
+.tab-firmware_flasher .options .manual_baud_rate select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-firmware_flasher .release_info .title {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-firmware_flasher .buttons a {
+    border: 1px solid #9c9c9c;
+}
+
+.btn .disabled {
+    background-color: #393b3a;
+}

src/css/tabs-dark/gps-dark.css

@@ -0,0 +1,25 @@
+.tab-gps .GPS_info .head, .tab-gps .GPS_signal_strength .head {
+    border-bottom: 1px solid #9c9c9c;
+    background-color: #393b3a;
+}
+
+.tab-gps #loadmap .controls {
+    background-color: #393b3a;
+}
+
+.tab-gps #loadmap .controls a {
+    background-color: #393b3a;
+    border: 1px #9c9c9c solid;
+}
+
+.tab-gps #loadmap .controls a:hover {
+    background-color: #393b3a;
+}
+
+.tab-gps #loadmap .controls a:active {
+    background-color: #393b3a;
+}
+
+progress[value]::-webkit-progress-bar {
+    background-color: #393b3a;
+}

src/css/tabs-dark/help-dark.css

@@ -0,0 +1,36 @@
+.tab-help .twothird {
+    width: calc(67% - 15px);
+    margin-right: 15px;
+}
+
+.tab-help .gui_box {
+    min-height: 500px;
+    margin-bottom: 0px;
+}
+
+.tab-help ul {
+    margin-bottom:15px;
+}
+
+.tab-help li {
+    border-top: 1px dotted silver;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    background-image: url(../../images/arrow.svg);
+    background-repeat: no-repeat;
+    background-position: 0px 8px;
+    background-size: 12px;
+}
+
+.tab-help li span {
+    margin-left: 17px;
+    display:block;
+}
+
+.tab-help li span a {
+    color: #ffbb00;
+}
+
+.tab-help .subline {
+    margin-bottom: 5px;
+}

src/css/tabs-dark/landing-dark.css

@@ -0,0 +1,37 @@
+.tab-landing .content_top {
+    height: 140px;
+    padding: 20px;
+    background-color: #0000;
+    background-image: url(../../images/pattern.png);
+    background-size: 300px;
+}
+
+.tab-landing .content_mid {
+    background-color: #3e3e3e;
+}
+
+/* hero block */
+.tab-landing .logowrapper {
+    color: white;
+}
+
+.tab-landing .logowrapper img {
+    background: #f3f3f357;
+}
+
+.sponsors li a:hover {
+    color: #393b3a;
+}
+
+.tab-landing .content_mid .text3 .wrap2 {
+    border: 1px solid #9c9c9c;
+    background: #5f5f5f;
+}
+
+#content.log_open #changelog {
+    background: #404040;
+}
+
+#content.policy_open #privacy_policy {
+    background: #404040;
+}

src/css/tabs-dark/led_strip-dark.css

@@ -0,0 +1,26 @@
+.tab-led-strip .section {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-led-strip .mainGrid {
+    background-color: #393b3a;
+    border: #9c9c9c;
+}
+
+.tab-led-strip .mainGrid .gPoint {
+    border: solid 1px #9c9c9c;
+}
+
+.tab-led-strip button {
+    border: 1px solid #9c9c9c;
+    background-color: #393b3a;
+}
+
+.tab-led-strip button:hover {
+    background-color: #393b3a;
+}
+
+.tab-led-strip .colorDefineSliders {
+    border-color: #9c9c9c;
+}
+

src/css/tabs-dark/logging-dark.css

@@ -0,0 +1,9 @@
+.tab-logging .properties dd {
+    color: white;
+}
+
+.tab-logging .speed {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}

src/css/tabs-dark/motors-dark.css

@@ -0,0 +1,27 @@
+.tab-motors .plot_control {
+    background-color: #393b3a;
+}
+
+.tab-motors .plot_control select {
+  border: 1px solid #9c9c9c;
+  background-color: #3a3a3a;
+  color: white;
+}
+
+.tab-motors .motorblock {
+    background-color: #393b3a;
+}
+
+.tab-motors .m-block {
+    background-color: #393b3a;
+}
+
+.tab-motors .m-block .meter-bar {
+    background-color: #393b3a;
+    border: 1px solid #9c9c9c;
+}
+
+.tab-motors .motor_testing .notice {
+    border: 2px solid #9c9c9c;
+    background-color: #4e4e4e;
+}

src/css/tabs-dark/onboard_logging-dark.css

@@ -0,0 +1,39 @@
+.tab-onboard_logging .regular-button {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-onboard_logging .regular-button.disabled {
+    background-color: #393b3a;
+    border: 1px solid #9c9c9c;
+}
+
+.tab-onboard_logging .speed {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-onboard_logging .dataflash-contents,
+.tab-onboard_logging .sdcard-contents {
+    border: 1px solid #9c9c9c;
+    background-color: #393b3a;
+}
+
+.tab-onboard_logging .dataflash-used,
+.tab-onboard_logging .sdcard-other {
+    background-color: #3a3a3a;
+}
+
+.tab-onboard_logging progress::-webkit-progress-bar {
+    background-color: #393b3a;
+}
+
+.tab-onboard_logging .blackboxRate select,
+.tab-onboard_logging .blackboxDevice select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-onboard_logging .sdcard-icon {
+    background-color: #393b3a;
+    border: 1px solid #9c9c9c;
+}

src/css/tabs-dark/osd-dark.css

@@ -0,0 +1,98 @@
+.info .progress {
+  border: 1px solid #9c9c9c;
+}
+
+.tab-osd .options select {
+  border: 1px solid #9c9c9c;
+}
+
+.tab-osd .release_info .title {
+  border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-osd .git_info {
+  border: 1px solid #9c9c9c;
+}
+
+.tab-osd .git_info .title {
+  border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-osd .buttons a {
+  border: 1px solid #9c9c9c;
+  background-color: #393b3a;
+}
+
+.tab-osd .buttons a:hover {
+  background-color: #393b3a;
+}
+
+.tab-osd .buttons a.flash_font.locked {
+  background-color: #393b3a;
+}
+
+.tab-osd .buttons a.flash_font.locked:hover {
+  cursor: default;
+  background-color: #393b3a;
+}
+
+.tab-osd .buttons a.load_remote_file.locked {
+  background-color: #393b3a;
+}
+
+.tab-osd .buttons a.load_remote_file.locked:hover {
+  cursor: default;
+  background-color: #393b3a;
+}
+
+.tab-osd .display-layout input.position{
+  border-bottom: 1px solid #9c9c9c
+}
+
+.tab-osd .preview .gui_box_titlebar select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.fontpresets {
+  border: 1px solid #9c9c9c;
+  background-color: #3c3c3c;
+  color: white;
+}
+
+.tab-osd .switchable-field {
+  border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-osd .switchable-field.mouseover {
+  background: #3a3a3a;
+  border: 1px solid #9c9c9c;
+}
+
+.tab-osd .switchable-field input {
+  border: 1px solid #9c9c9c;
+  background-color: #3a3a3a;
+  color: white;
+}
+
+.tab-osd .alarms label {
+  border-bottom: 1px solid #9c9c9c;
+  padding-bottom: 5px;
+}
+
+.tab-osd .alarms input {
+  border: 1px solid #9c9c9c;
+  background-color: #3a3a3a;
+  color: white;
+}
+
+.timer-option {
+  margin-bottom: 2px;
+  background-color: #3a3a3a;
+  color: white;
+}
+
+.osdprofile-active {
+  background-color: #3a3a3a;
+  color: white;
+}

src/css/tabs-dark/pid_tuning-dark.css

@@ -0,0 +1,243 @@
+.tab-pid_tuning .tpa th {
+    background-color: #393b3a;
+    border-left: 0px solid #9c9c9c;
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .throttle_limit th {
+    background-color: #393b3a;
+    border-left: 0px solid #9c9c9c;
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .cf tr {
+    background-color: #393b3a;
+}
+
+.tab-pid_tuning .cf th {
+    border-right: solid 1px #9c9c9c;
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.tab-pid_tuning .cf input {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .cf select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .throttle_curve {
+    border: 1px solid #9c9c9c;
+    background-image: url(../../images/paper-dark.jpg);
+}
+
+.tab-pid_tuning .throttle table th {
+    background: #ffbb2a;
+    border-right: 1px solid #9c9c9c;
+    color: black;
+}
+
+.tab-pid_tuning .throttle table th:first-child {
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.tab-pid_tuning .throttle table td {
+    background: #414443;
+    border-right: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .throttle table th {
+    background: #ffbb2a;
+    border-right: 1px solid #9c9c9c;
+    color: black;
+}
+
+.tab-pid_tuning .throttle table td {
+    background: #414443;
+    border-right: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .throttle table tr:nth-child(odd) {
+    background-color: #393b3a;
+}
+
+.tab-pid_tuning .throttle table input {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .rc_curve th {
+    background-color: #ffbb2a;
+    border-left: 0px solid #9c9c9c;
+    border-bottom: 1px solid #9c9c9c;
+    color: black;
+}
+
+.tab-pid_tuning .rate_curve {
+    border: 1px solid #9c9c9c;
+    background-image: url(../../images/paper-dark.jpg);
+}
+
+.tab-pid_tuning table, .tab-pid_tuning table td {
+    border-bottom: 0px solid #9c9c9c;
+}
+
+.tab-pid_tuning .pid_titlebar th {
+    border-right: 1px solid #9c9c9c;
+    background: #ffbb2a;
+    color: black;
+}
+
+.tab-pid_tuning table tr td:last-child {
+    border-right: 0px solid #9c9c9c;
+}
+
+.tab-pid_tuning table.compensation .suboption select{
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning table td {
+    border-right: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning table input {
+    border: 0px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning table select {
+    text-align-last: right;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .tab_container {
+    background-color: #393b3a;
+}
+
+.tab-pid_tuning .tab_container td {
+    background-color: #535655;
+    border-right: 1px solid #393b3a;
+}
+
+.tab-pid_tuning .tab_container td:last-child {
+    background-color: #535655;
+}
+
+.tab-pid_tuning .tab_container td.active {
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.tab-pid_tuning .tab_container td.active a {
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.tab-pid_tuning .single-field .head {
+    border-bottom: 1px solid #9c9c9c;
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.fancy.header {
+  background-color: #393b3a;
+  border-bottom: 1px solid #9c9c9c;
+}
+
+.pid_mode {
+    background-color: #393b3a;
+    border-bottom: 1px solid #9c9c9c;
+    color: white;
+}
+
+.pid_titlebar {
+    background-color: #393b3a;
+}
+
+.tab-pid_tuning .number {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .number input {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .gui_box span {
+    color: white;
+}
+
+.tab-pid_tuning .bottomarea {
+    border-bottom: 1px solid #9c9c9c;
+    border-left: 1px solid #9c9c9c;
+    border-right: 1px solid #9c9c9c;
+    background-color: #393b3a;
+}
+
+.tab-pid_tuning .profile select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .rate_profile select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .controller select {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .delta select {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .rates_preview {
+    background-image: url(../../images/paper-dark.jpg);
+    border: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .pidTuning tr {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .rc_curve .cf tr  {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .rc_curve_bg {
+    background: #393b3a;
+}
+
+.tabarea {
+    border: 1px solid #9c9c9c;
+    border-top: 0px solid #9c9c9c;
+    background: #393b3a;
+}
+
+.tab-pid_tuning .regular-button {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning .regular-button.disabled {
+    background-color: #393b3a;
+    border: 1px solid #9c9c9c;
+}
+
+.tab-pid_tuning dialog select {
+    border: 1px solid #9c9c9c;
+}

src/css/tabs-dark/ports-dark.css

@@ -0,0 +1,27 @@
+.tab-ports table td {
+    border-bottom: 1px solid #9c9c9c;
+    border-left: 1px solid #9c9c9c;
+    border-right: 1px solid #9c9c9c;
+}
+
+.tab-ports table thead tr:first-child, .tab-ports table tr:nth-child(even) {
+    background-color: #4e4e4e;
+}
+
+.tab-ports table thead tr:first-child {
+    background-color: #393b3a;
+}
+
+.tab-ports select {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-ports .ports select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-ports .ports thead td {
+    background-color: #ffbb2a;
+    color: black;
+}

src/css/tabs-dark/power-dark.css

@@ -0,0 +1,17 @@
+.tab-power .number input {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-power .number,
+.tab-power .select
+ {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-power .battery-configuration select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}

src/css/tabs-dark/receiver-dark.css

@@ -0,0 +1,168 @@
+.tab-receiver .help {
+    background-color: #3a3a3a;
+}
+
+.tab-receiver .bars .meter-bar {
+    border: 1px solid #9c9c9c;
+    background-color: #393b3a;
+}
+
+.tab-receiver .bars .meter-bar .label {
+    color: white;
+}
+
+.tab-receiver .tunings {
+    background-color: #393b3a;
+}
+
+.tab-receiver .tunings .head {
+    border-right: 1px solid #9c9c9c;
+}
+
+.tab-receiver .tunings table th {
+    background-color: #ffbb2a;
+    border-right: 1px solid #9c9c9c;
+    color: black;
+}
+
+.tab-receiver .tunings table td {
+    background: #414443;
+    border-right: 1px solid #9c9c9c;
+}
+
+.tab-receiver .tunings table tr:nth-child(odd) {
+    background-color: #393b3a;
+}
+
+.tab-receiver .tunings table input {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rssi_channel_wrapper {
+    background-color: #393b3a;
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-receiver .rssi_channel_wrapper select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rssi_channel_wrapper .head {
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.tab-receiver .rssi_channel_wrapper select {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-receiver .rcmap_wrapper {
+    background-color: #393b3a;
+}
+
+.tab-receiver .rcmap_wrapper .head {
+    background-color: #ffbb2a;
+    border-right: 1px solid #9c9c9c;
+    color: black;
+}
+
+.tab-receiver .hybrid_element {
+    border-right: 1px solid #9c9c9c;
+    border-bottom: 1px solid #9c9c9c;
+    border-left: 1px solid #9c9c9c;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+.tab-receiver .hybrid_element input {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .hybrid_element select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rcSmoothing-derivative-manual select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rcSmoothing-input-manual select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rcSmoothing-input-manual select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rc-smoothing-channels {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-receiver .rc-smoothing-type select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rc-smoothing-channels select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rcSmoothing-input-type select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rcSmoothing-input-type select {
+    border: 1px solid #9c9c9c;
+    width: calc(100% - 8px);
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rcInterpolation select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rcInterpolation-label {
+    border-right: 1px solid #9c9c9c;
+}
+
+.tab-receiver .rcSmoothing-derivative-type select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .throttle_curve {
+    background-image: url(../../images/paper-dark.jpg);
+}
+
+.tab-receiver select[name="rx_refresh_rate"] {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .model_preview {
+    background-image: url(../../images/paper-dark.jpg);
+}

src/css/tabs-dark/receiver_msp-dark.css

@@ -0,0 +1,148 @@
+body {
+    font-family: 'Segoe UI', Tahoma, sans-serif;
+    font-size: 12px;
+    color: #303030;
+    margin: 10px;
+    overflow: hidden;
+}
+
+.control-gimbals {
+    /* A generous padding around the window edges ensures that we continue to receive mousemove events (since 
+     * cursor stays in the window for longer)
+     */
+    padding: 25px;
+    padding-bottom: 0;
+    text-align: center;
+    display: inline-flex;
+}
+
+.control-gimbal {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    background-color: #393b3a;
+    margin-left: 1em;
+    margin-right: 1em;
+    margin-bottom: 2em;
+    display: inline-block;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.crosshair {
+    display: block;
+    position: absolute;
+    background-color: #393b3a;
+}
+
+.crosshair-vert {
+    width: 1px;
+    height: 100%;
+    left: 50%;
+}
+
+.crosshair-horz {
+    height: 1px;
+    width: 100%;
+    top: 50%;
+}
+
+.gimbal-label {
+    display: block;
+    position: absolute;
+    text-align: center;
+}
+
+.gimbal-label-horz {
+    top: calc(100% + 0.5em);
+    width: 100%;
+}
+
+.gimbal-label-vert {
+    transform: rotate(-90deg);
+    /*transform-origin:0% 100%;*/
+    top: calc(50% - 0.5em);
+    width: 100%;
+    left: calc(-50% - 1em);
+}
+
+.control-stick {
+    background-color: rgba(255, 50, 50, 1.0);
+    width: 20px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    display: block;
+    border-radius: 100%;
+    position: absolute;
+    cursor: pointer;
+}
+
+.control-slider {
+    margin: 20px;
+}
+
+.tooltip {
+    position: absolute;
+    left: calc(100% + 24px);
+    top: 0;
+}
+
+.control-slider .slider {
+    margin-left: 50px;
+    margin-right: 50px;
+}
+
+.slider-label {
+    position: absolute;
+    text-align: right;
+    width: 40px;
+    left: -65px;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+    font-family: 'open_sanssemibold', Arial;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+.button-enable a {
+    /* Center the button */
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%);
+
+    /*  common styles for content toolbar buttons */
+    margin-top: 0px;
+    margin-bottom: 0px;
+    margin-left: 0px;
+    background-color: #ffbb00;
+    border-radius: 3px;
+    border: 1px solid #4c8829;
+    color: #fff;
+    float: left;
+    font-family: 'open_sansbold', Arial;
+    font-size: 12px;
+    text-shadow: 0px 1px rgba(0, 0, 0, 0.25);
+    display: block;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    padding: 0px;
+    padding-left: 9px;
+    padding-right: 9px;
+    line-height: 28px;
+}
+
+.button-enable a:hover {
+    background-color: #6ac435;
+    transition: all ease 0.2s;
+}
+.button-enable a:active {
+    background-color: #4d9324;
+    transition: all ease 0.0s;
+    box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35);
+}

src/css/tabs-dark/sensors-dark.css

@@ -0,0 +1,13 @@
+.tab-sensors .plot_control {
+    background-color: #393b3a;
+}
+
+.tab-sensors .plot_control select {
+    border: 1px solid #9c9c9c;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-sensors text {
+    fill: white;
+}

src/css/tabs-dark/servos-dark.css

@@ -0,0 +1,47 @@
+.tab-servos .title {
+    border: 1px solid #9c9c9c;
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.tab-servos table th {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-servos table td {
+    border-bottom: 1px solid #9c9c9c;
+    border-left: 1px solid #9c9c9c;
+    border-right: 1px solid #9c9c9c;
+}
+
+.tab-servos table tr:nth-child(even) {
+    background-color: #393b3a;
+}
+
+.tab-servos table tr:first-child {
+    border-left: 1px solid #9c9c9c;
+    border-right: 1px solid #9c9c9c;
+    background-color: #393b3a;
+}
+
+.tab-servos table .main {
+    background-color: #393b3a;
+}
+
+.tab-servos table input {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-servos table select {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-servos table input[type="number"] {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-servos .direction .rate {
+    background-color: #3a3a3a;
+    color: white;
+}

src/css/tabs-dark/setup-dark.css

@@ -0,0 +1,43 @@
+#interactive_block {
+    background-color: #393b3a;
+    border: 1px solid #9c9c9c;
+}
+
+.attitude_info {
+    color: white;
+}
+
+#interactive_block a.reset {
+    color: black;
+    border: 1px solid #9c9c9c;
+    background-color: #ffbb2a;
+}
+
+#interactive_block a.reset:hover {
+    background-color: #393b3a;
+}
+
+#canvas_wrapper {
+    background-image: url(../../images/paper-dark.jpg);
+}
+
+.gui_box grey .block {
+    border: 1px solid #9c9c9c;
+}
+
+.gui_box grey .block .head {
+    border-bottom: 1px solid #9c9c9c;
+    background-color: #393b3a;
+}
+
+.gui_box grey .block.info {
+    border: 1px solid #9c9c9c;
+}
+
+.cell_setup {
+    border-bottom: solid 1px #9c9c9c;
+}
+
+.tab-setup .regular-button.disabled {
+    border: 1px solid #9c9c9c;
+}

src/css/tabs-dark/transponder-dark.css

@@ -0,0 +1,19 @@
+.tab-transponder .text input {
+    border: 1px solid #9c9c9c;
+}
+
+.tab-transponder .text .disabled {
+    background-color: #393b3a;
+}
+
+.tab-transponder .text {
+    border-bottom: 1px solid #9c9c9c;
+}
+
+.tab-transponder .gui_box span {
+    color: white;
+}
+
+.tab-transponder select {
+    border: 1px solid #9c9c9c;
+}

src/css/tabs/pid_tuning.css

@@ -394,6 +394,7 @@
     width: 396px;
     height: 29px;
     border-right-width: 0px;
+    background: #fff;
 }
 
 .tab-pid_tuning .tab_container td {

src/js/DarkTheme.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var css_dark = [
+    './css/main-dark.css',
+    './css/tabs-dark/landing-dark.css',
+    './css/tabs-dark/setup-dark.css',
+    './css/tabs-dark/setup_osd-dark.css',
+    './css/tabs-dark/help-dark.css',
+    './css/tabs-dark/ports-dark.css',
+    './css/tabs-dark/configuration-dark.css',
+    './css/tabs-dark/pid_tuning-dark.css',
+    './css/tabs-dark/receiver-dark.css',
+    './css/tabs-dark/servos-dark.css',
+    './css/tabs-dark/gps-dark.css',
+    './css/tabs-dark/motors-dark.css',
+    './css/tabs-dark/led_strip-dark.css',
+    './css/tabs-dark/sensors-dark.css',
+    './css/tabs-dark/cli-dark.css',
+    './css/tabs-dark/logging-dark.css',
+    './css/tabs-dark/onboard_logging-dark.css',
+    './css/tabs-dark/firmware_flasher-dark.css',
+    './css/tabs-dark/adjustments-dark.css',
+    './css/tabs-dark/auxiliary-dark.css',
+    './css/tabs-dark/failsafe-dark.css',
+    './css/tabs-dark/osd-dark.css',
+    './css/tabs-dark/power-dark.css',
+    './css/tabs-dark/transponder-dark.css',
+    './js/libraries/jbox/jBox-dark.css',
+]
+
+var DarkTheme = {
+    configEnabled: false,
+};
+
+DarkTheme.setConfig = function(result) {
+    if (this.configEnabled != result) {
+        this.configEnabled = result;
+
+        if (this.configEnabled) {
+            this.applyDark();
+        } else {
+            this.applyNormal();
+        }
+    }
+};
+
+DarkTheme.applyDark = function() {
+    for (var i = 0; i < css_dark.length; i++) {
+        $('link[href="' + css_dark[i] + '"]').prop('disabled', false);
+    }
+};
+
+DarkTheme.applyNormal = function() {
+    for (var i = 0; i < css_dark.length; i++) {
+        $('link[href="' + css_dark[i] + '"]').prop('disabled', true);
+    }
+};

src/js/main.js

@@ -379,6 +379,15 @@ function startProcess() {
                         CliAutoComplete.setEnabled(checked);
                     }).change();
 
+                $('div.darkTheme input')
+                    .prop('checked', DarkTheme.configEnabled)
+                    .change(function () {
+                        var checked = $(this).is(':checked');
+
+                        chrome.storage.local.set({'darkTheme': checked});
+                        DarkTheme.setConfig(checked);
+                    }).change();
+
                 chrome.storage.local.get('userLanguageSelect', function (result) {
 
                     var userLanguage_e = $('div.userLanguage select');
@@ -543,6 +552,10 @@ function startProcess() {
     chrome.storage.local.get('cliAutoComplete', function (result) {
         CliAutoComplete.setEnabled(typeof result.cliAutoComplete == 'undefined' || result.cliAutoComplete); // On by default
     });
+
+    chrome.storage.local.get('darkTheme', function (result) {
+        DarkTheme.setConfig(result.darkTheme);
+    });
 };
 
 function checkForConfiguratorUpdates() {

src/main.html

@@ -35,6 +35,34 @@
     <link type="text/css" rel="stylesheet" href="./css/dropdown-lists/css/style_lists.css" media="all"/>
     <link type="text/css" rel="stylesheet" href="./js/libraries/switchery/switchery.css" media="all"/>
     <link rel="stylesheet" type="text/css" href="./js/libraries/jbox/jBox.css"/>
+
+    <link type="text/css" rel="stylesheet" href="./css/main-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/landing-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/setup-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/setup_osd-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/help-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/ports-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/configuration-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/pid_tuning-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/receiver-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/servos-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/gps-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/motors-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/led_strip-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/sensors-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/cli-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/logging-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/onboard_logging-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/firmware_flasher-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/adjustments-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/auxiliary-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/failsafe-dark.css" media="all" disabled/>
+    <link type="text/css" rel="stylesheet" href="./css/tabs-dark/osd-dark.css" media="all" disabled/>
+    <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/>
+    <link rel="stylesheet" type="text/css" href="./js/libraries/jbox/jBox-dark.css" disabled/>
+
+
     <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>
@@ -112,6 +140,7 @@
     <script type="text/javascript" src="./js/tabs/transponder.js"></script>
     <script type="text/javascript" src="./node_modules/jquery-textcomplete/dist/jquery.textcomplete.min.js"></script>
     <script type="text/javascript" src="./js/CliAutoComplete.js"></script>
+    <script type="text/javascript" src="./js/DarkTheme.js"></script>
     <title i18n="windowTitle"></title>
 </head>
 <body>

src/tabs/options.html

@@ -13,6 +13,9 @@
 <div class="cliAutoComplete">
     <label><input type="checkbox" /><span i18n="cliAutoComplete"></span></label>
 </div>
+<div class="darkTheme">
+    <label><input type="checkbox" /><span i18n="darkTheme"></span></label>
+</div>
 <div class="separator"></div>
 <div class="userLanguage">
     <label>

src/tabs/pid_tuning.html

@@ -47,7 +47,7 @@
                 </div>
             </div>
         </div>
-        <div class="tab_container" style="background-color: #fff;">
+        <div class="tab_container">
             <table>
                 <tr>
                     <td class="pid active">