diff --git a/src/css/dark-theme.css b/src/css/dark-theme.css
new file mode 100644
index 00000000..cb49fdbe
--- /dev/null
+++ b/src/css/dark-theme.css
@@ -0,0 +1,836 @@
+:root {
+    --accent: #ffbb00;
+    --subtleAccent: #9c9c9c;
+    --quietHeader: #bf8606;
+    --defaultText: #ffffff;
+    --subtleText: #c0c0c0;
+    --mutedText: #d6d6d6;
+    --boxBackground: #3a3a3a;
+    --alternativeBackground: #4e4e4e;
+    --sideBackground: #404040;
+    --paper: url(../../images/paper-dark.jpg);
+    --ledAccent: #6e6e6e;
+    --ledBackground: #424242;
+    --gimbalBackground: var(--subtleAccent);
+    --gimbalCrosshair: var(--mutedText);
+    --switcherysecond: #858585;
+}
+
+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: #4e4e4e;
+    color: white;
+}
+
+.content_toolbar {
+    background-color: #555857;
+}
+
+.content_toolbar .btn a {
+    border: 1px solid #ffbb2a;
+}
+
+.content_toolbar .btn a.disabled {
+    border: 1px solid #ffbb2a;
+}
+
+.gui_box {
+    border: 1px solid #4d4d4d;
+    background-color: #393b3a;
+}
+
+.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;
+}
+
+.gui_warning {
+    background: #393b3a;
+}
+
+.gui_note {
+    background: #393b3a;
+}
+
+.grey {
+    background-color: #414443
+}
+
+.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;
+}
+
+#quad-status_wrapper {
+    color: #393b3a;
+}
+
+button {
+    border: 1px solid #ffbb2a;
+    background-color: #ffbb2a;
+    color: black;
+}
+
+.helpicon {
+    background-image: url(../images/icons/cf_icon_info_white.svg);
+    opacity: 0.3;
+}
+.cf .helpicon {
+    background-image: url(../images/icons/cf_icon_info_grey.svg);
+    opacity: 0.4;
+}
+.cf .helpicon:hover {
+    background-image: url(../images/icons/cf_icon_info_grey.svg);
+    opacity: 1;
+}
+
+.gui_box_titlebar .helpicon {
+    background-image: url(../images/icons/cf_icon_info_grey.svg);
+}
+
+.cf_table td {
+    border-style: solid;
+}
+
+.noboarder td {
+    border-style: unset;
+}
+
+.noUi-pips {
+    color: var(--mutedText);
+}
+
+.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 #ffffff;
+    color: white;
+}
+
+.jBox-pointer:after {
+    background: #393b3a;
+}
+
+
+/* ADJUSTMENTS TAB */
+
+.tab-adjustments .adjustment:nth-child(odd) {
+    background-color: #2f2f2f;
+}
+
+.tab-adjustments .adjustments {
+    background-color: #393b3a;
+}
+
+.tab-adjustments .adjustments td {
+    border-top: 1px solid #00000000;
+    border-bottom: 1px solid #00000000;
+}
+
+.tab-adjustments .adjustment select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+
+/* AUXILIARY TAB */
+
+.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,.logic,.linkedTo {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-auxiliary .buttons a {
+    background-color: #333333;
+    color: white;
+}
+
+.tab-auxiliary .buttons a:hover {
+    background-color: #393b3a;
+}
+
+
+/* CLI TAB */
+
+.tab-cli textarea[name='commands']::placeholder {
+    color: silver;
+}
+
+.tab-cli textarea[name='commands'] {
+    background: black;
+    color: white;
+}
+
+/* AutoComplete */
+.cli-textcomplete-dropdown {
+    background-color: #393b3a;
+}
+.cli-textcomplete-dropdown a {
+    color: white;
+}
+.cli-textcomplete-dropdown .active {
+    background-color: var(--quietHeader);
+}
+
+
+/* CONFIGURATION TAB */
+
+.tab-configuration .mixerPreview {
+    background-color: #393b3a;
+}
+
+.tab-configuration .gui_box span {
+    color: white;
+}
+
+.tab-configuration input,
+.tab-configuration select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+
+/* FAILSAFE TAB */
+
+.tab-failsafe .number input {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-failsafe .number input:disabled {
+    background-color: #393b3a;
+    color: grey;
+}
+
+.tab-failsafe .radioarea {
+    background-color: #393b3a;
+}
+
+.tab-failsafe .gui_box span {
+    color: white;
+}
+
+.tab-failsafe .stage1 select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-failsafe .modename {
+    background-color: #393b3a;
+}
+
+.tab-failsafe .switchMode {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-failsafe .pro1 {
+    background-image: url(../../images/icons/cf_failsafe_procedure1-dark.svg);
+}
+
+.tab-failsafe .pro2 {
+    background-image: url(../../images/icons/cf_failsafe_procedure2-dark.svg);
+}
+
+.tab-failsafe .pro4 {
+    background-image: url(../../images/icons/cf_failsafe_procedure4-dark.svg);
+}
+
+
+/* FIRMWARE FLASHER TAB */
+
+.btn .disabled {
+    background-color: #393b3a;
+}
+
+.gui_note .gui_box_titlebar {
+    color: black;
+}
+
+.tab-firmware_flasher .options select {
+    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 .target {
+    color: #98ddff;
+}
+
+.tab-firmware_flasher .cf_table td {
+    border-bottom: solid 1px #4f4f4f;
+}
+
+
+/* GPS TAB */
+
+.tab-gps .GPS_info .head, .tab-gps .GPS_signal_strength .head {
+    background-color: #393b3a;
+}
+
+.tab-gps #loadmap .controls {
+    background-color: #393b3a;
+}
+
+.tab-gps #loadmap .controls a {
+    background-color: #393b3a;
+}
+
+.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;
+}
+
+
+/* LANDING */
+
+.tab-landing .content_top {
+    background-color: #00000000;
+}
+
+.tab-landing .content_mid {
+    background-color: #3e3e3e;
+}
+
+.tab-landing .logowrapper img {
+    content:url(/images/cf_logo_black.svg);
+}
+
+.tab-landing .content_mid .text3 .wrap2 {
+    background: #5f5f5f;
+}
+
+
+/* LED STRIP TAB */
+
+.tab-led-strip .section {
+    color: #c4c4c4;
+}
+
+.tab-led-strip .mainGrid {
+    background-color: #4e4e4e;
+}
+
+.tab-led-strip button {
+    background-color: #6b6b6b;
+    color: white;
+}
+
+.tab-led-strip button:hover {
+    border: 1px solid #ffffff;
+    background-color: #393b3a;
+}
+
+.tab-led-strip .gridSections,
+.tab-led-strip .gridSections .block {
+    border: none;
+}
+
+
+/* LOGGING TAB */
+
+.tab-logging .speed {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+
+/* MOTORS TAB */
+
+.tab-motors .plot_control {
+    background-color: #393b3a;
+}
+
+.tab-motors .plot_control select {
+  background-color: #3a3a3a;
+  color: white;
+}
+
+.tab-motors .motorblock {
+    background-color: #393b3a;
+}
+
+.tab-motors .m-block {
+    background-color: #393b3a;
+}
+
+.tab-motors .m-block .label {
+    color: white;
+}
+
+.tab-motors .m-block .meter-bar {
+    background-color: #393b3a;
+}
+
+.tab-motors .motor_testing .notice {
+    background-color: #4e4e4e;
+}
+
+
+/* ONBOARD LOGGING TAB */
+
+.tab-onboard_logging .regular-button.disabled {
+    background-color: #393b3a;
+}
+
+.tab-onboard_logging .dataflash-contents,
+.tab-onboard_logging .sdcard-contents {
+    background-color: #393b3a;
+}
+
+.tab-onboard_logging .dataflash-used,
+.tab-onboard_logging .sdcard-other {
+    background-color: #848484;
+}
+
+.tab-onboard_logging progress::-webkit-progress-bar {
+    background-color: #393b3a;
+}
+
+.tab-onboard_logging .blackboxRate select,
+.tab-onboard_logging .blackboxDebugMode select,
+.tab-onboard_logging .blackboxDevice select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-onboard_logging .sdcard-icon {
+    background-color: #393b3a;
+}
+
+
+/* OSD TAB */
+
+.tab-osd .display-layout input.position {
+    border-bottom: 1px solid red;
+}
+
+.tab-osd .preview {
+    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../../images/osd-bg-1.jpg);
+    background-size: cover;
+}
+
+/* these two items replace the look of the checkboxes in only CSS */
+.tab-osd input[type='checkbox']:after {
+    line-height: 1.5em;
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-top: -1px;
+    margin-left: -1px;
+    border: 1px solid #404040;
+    border-radius: 0.25em;
+    background: #4d4d4d;
+}
+
+.tab-osd input[type='checkbox']:checked:after {
+    background: #ffbb00;
+    border: 1px solid #404040;
+}
+
+
+/* PID TUNING TAB */
+
+.tab-pid_tuning .profile .helpicon,
+.tab-pid_tuning .rate_profile .helpicon,
+.tab-pid_tuning .pid_titlebar .helpicon {
+    background-image: url(../../images/icons/cf_icon_info_grey.svg);
+    opacity: 0.4;
+}
+.tab-pid_tuning .profile .helpicon:hover,
+.tab-pid_tuning .rate_profile .helpicon:hover,
+.tab-pid_tuning .pid_titlebar .helpicon:hover {
+    opacity: 1;
+}
+
+.tab-pid_tuning .throttle_limit th {
+    background-color: #393b3a;
+    border-bottom: 1px solid #5e5e5e;
+}
+
+.tab-pid_tuning .cf tr {
+    background-color: #414443;
+}
+
+.tab-pid_tuning .cf th {
+    background-color: var(--quietHeader);
+    color: white;
+}
+
+.tab-pid_tuning .cf input {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .cf select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+/* These values should have been inherited from the regular style, but are not */
+.tab-pid_tuning .pid_titlebar .wide_header {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+}
+
+.tab-pid_tuning table.compensation .suboption select{
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning table input,.inputBackground {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning table select {
+    text-align-last: right;
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .tab-container > div {
+    background-color: #535655;
+    border-right: 1px solid #393b3a;
+}
+
+.fancy.header {
+  background-color: #393b3a;
+}
+
+.pid_roll {
+    background-color: #A00000;
+}
+
+.pid_pitch {
+    background-color: #00A000;
+}
+
+.pid_yaw {
+    background-color: #0000A0;
+}
+
+.pid_mode {
+    background-color: #3c3c3c;
+    border-bottom: 1px solid #3c3c3c;
+    color: white;
+}
+
+.pid_titlebar {
+    background-color: #393b3a;
+}
+
+.tab-pid_tuning .number input {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .gui_box span {
+    color: white;
+}
+
+.tab-pid_tuning .bottomarea {
+    background-color: #393b3a;
+}
+
+.tab-pid_tuning .profile select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-pid_tuning .rate_profile select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tabarea {
+    background: #393b3a;
+}
+
+.tab-pid_tuning .regular-button.disabled {
+    background-color: #393b3a;
+}
+
+.tab-pid_tuning .sliderLabels th {
+    background: #414443;
+    color: white;
+}
+
+.tab-pid_tuning input:disabled,
+.tab-pid_tuning .cf input:disabled,
+.tab-pid_tuning select:disabled,
+.tab-pid_tuning .cf select:disabled {
+    color: rgb(105, 105, 105);
+    background-color: #2d2d2d;
+}
+
+.tab-pid_tuning table.compensation tr {
+    border-bottom: 1px solid #6b6b6b;
+}
+
+.tab-pid_tuning .slidersWarning {
+    background: #542415;
+}
+
+
+/* PORTS TAB */
+
+.tab-ports table td:first-child {
+    border-left: none;
+}
+.tab-ports table td:last-child {
+    border-right: none;
+}
+
+.tab-ports .ports tr:last-child,
+.tab-ports .ports tr:last-child td {
+    border-bottom: none;
+}
+
+.tab-ports table td {
+    border-bottom: 1px solid #575757;
+    border-left: 1px solid #575757;
+    border-right: 1px solid #575757;
+}
+
+
+/* POWER TAB */
+
+.tab-power .number input {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-power .battery-configuration select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+
+/* RECEIVER TAB */
+
+.tab-receiver select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .bars .meter-bar {
+    background-color: #393b3a;
+}
+
+.tab-receiver .bars .meter-bar .label {
+    color: white;
+}
+
+.tab-receiver .tunings {
+    background-color: #393b3a;
+}
+
+.tab-receiver .tunings table td {
+    background: #414443;
+}
+
+.tab-receiver .tunings table tr:nth-child(odd) {
+    background-color: #393b3a;
+}
+
+.tab-receiver .tunings table input {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-receiver .rssi_channel_wrapper {
+    background-color: #414443;
+    border-bottom: 1px solid #4d4d4d;
+    border-right: 1px solid #4d4d4d;
+}
+
+.tab-receiver .rcmap_wrapper {
+    background-color: #414443;
+    border-left: 1px solid #4d4d4d;
+    border-bottom: 1px solid #4d4d4d;
+}
+
+.tab-receiver .hybrid_element {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
+
+.tab-receiver .hybrid_element input {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+
+/* SENSORS TAB */
+
+.tab-sensors .plot_control {
+    background-color: #2f2f2f;
+}
+
+.tab-sensors .plot_control select {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-sensors text {
+    fill: white;
+}
+
+
+/* SERVOS TAB */
+
+.tab-servos table th {
+    background: #828885;
+}
+
+.tab-servos table tr:nth-child(even) {
+    background-color: #2f2f2f;
+}
+
+.tab-servos table .main {
+    background-color: #393b3a;
+}
+
+.tab-servos table input[type="number"] {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.tab-servos .direction .rate {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+
+/* SETUP TAB */
+
+.tab-setup #interactive_block {
+    background-color: #393b3a;
+}
+
+.tab-setup .attitude_info {
+    color: white;
+}
+
+.tab-setup #interactive_block a.reset {
+    color: white;
+    background-color: #575757;
+}
+
+.tab-setup #interactive_block a.reset:hover {
+    background-color: #393b3a;
+}
+
+
+/* TRANSPONDER TAB */
+
+.tab-transponder .text .disabled {
+    background-color: #393b3a;
+}
+
+.tab-transponder .gui_box span {
+    color: white;
+}
diff --git a/src/css/main-dark.css b/src/css/main-dark.css
deleted file mode 100644
index 1d16d17d..00000000
--- a/src/css/main-dark.css
+++ /dev/null
@@ -1,172 +0,0 @@
-:root {
-    --accent: #ffbb00;
-    --subtleAccent: #9c9c9c;
-    --quietHeader: #bf8606;
-    --defaultText: #ffffff;
-    --subtleText: #c0c0c0;
-    --mutedText: #d6d6d6;
-    --boxBackground: #3a3a3a;
-    --alternativeBackground: #4e4e4e;
-    --sideBackground: #404040;
-    --paper: url(../../images/paper-dark.jpg);
-    --ledAccent: #6e6e6e;
-    --ledBackground: #424242;
-    --gimbalBackground: var(--subtleAccent);
-    --gimbalCrosshair: var(--mutedText);
-    --switcherysecond: #858585;
-}
-
-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: #4e4e4e;
-    color: white;
-}
-
-.content_toolbar {
-    background-color: #555857;
-}
-
-.content_toolbar .btn a {
-    border: 1px solid #ffbb2a;
-}
-
-.content_toolbar .btn a.disabled {
-    border: 1px solid #ffbb2a;
-}
-
-.gui_box {
-    border: 1px solid #4d4d4d;
-    background-color: #393b3a;
-}
-
-.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;
-}
-
-.gui_warning {
-    background: #393b3a;
-}
-
-.gui_note {
-    background: #393b3a;
-}
-
-.grey {
-    background-color: #414443
-}
-
-.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;
-}
-
-#quad-status_wrapper {
-    color: #393b3a;
-}
-
-button {
-    border: 1px solid #ffbb2a;
-    background-color: #ffbb2a;
-    color: black;
-}
-
-.helpicon {
-    background-image: url(../images/icons/cf_icon_info_white.svg);
-    opacity: 0.3;
-}
-.cf .helpicon {
-    background-image: url(../images/icons/cf_icon_info_grey.svg);
-    opacity: 0.4;
-}
-.cf .helpicon:hover {
-    background-image: url(../images/icons/cf_icon_info_grey.svg);
-    opacity: 1;
-}
-
-.gui_box_titlebar .helpicon {
-    background-image: url(../images/icons/cf_icon_info_grey.svg);
-}
-
-.cf_table td {
-    border-style: solid;
-}
-
-.noboarder td {
-    border-style: unset;
-}
-
-.noUi-pips {
-    color: var(--mutedText);
-}
-
-.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 #ffffff;
-    color: white;
-}
-
-.jBox-pointer:after {
-    background: #393b3a;
-}
diff --git a/src/css/tabs-dark/adjustments-dark.css b/src/css/tabs-dark/adjustments-dark.css
deleted file mode 100644
index b173841a..00000000
--- a/src/css/tabs-dark/adjustments-dark.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.tab-adjustments .adjustment:nth-child(odd) {
-    background-color: #2f2f2f;
-}
-
-.tab-adjustments .adjustments {
-    background-color: #393b3a;
-}
-
-.tab-adjustments .adjustments td {
-    border-top: 1px solid #00000000;
-    border-bottom: 1px solid #00000000;
-}
-
-.tab-adjustments .adjustment select {
-    background-color: #3a3a3a;
-    color: white;
-}
diff --git a/src/css/tabs-dark/auxiliary-dark.css b/src/css/tabs-dark/auxiliary-dark.css
deleted file mode 100644
index fcdf5d87..00000000
--- a/src/css/tabs-dark/auxiliary-dark.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.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,.logic,.linkedTo {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-auxiliary .buttons a {
-    background-color: #333333;
-    color: white;
-}
-
-.tab-auxiliary .buttons a:hover {
-    background-color: #393b3a;
-}
diff --git a/src/css/tabs-dark/cli-dark.css b/src/css/tabs-dark/cli-dark.css
deleted file mode 100644
index 9012ddaf..00000000
--- a/src/css/tabs-dark/cli-dark.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.tab-cli textarea[name='commands']::placeholder {
-    color: silver;
-}
-
-.tab-cli textarea[name='commands'] {
-    background: black;
-    color: white;
-}
-
-/* AutoComplete */
-.cli-textcomplete-dropdown {
-    background-color: #393b3a;
-}
-.cli-textcomplete-dropdown a {
-    color: white;
-}
-.cli-textcomplete-dropdown .active {
-    background-color: var(--quietHeader);
-}
diff --git a/src/css/tabs-dark/configuration-dark.css b/src/css/tabs-dark/configuration-dark.css
deleted file mode 100644
index 2c52c5c4..00000000
--- a/src/css/tabs-dark/configuration-dark.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.tab-configuration .mixerPreview {
-    background-color: #393b3a;
-}
-
-.tab-configuration .gui_box span {
-    color: white;
-}
-
-.tab-configuration input,
-.tab-configuration select {
-    background-color: #3a3a3a;
-    color: white;
-}
diff --git a/src/css/tabs-dark/failsafe-dark.css b/src/css/tabs-dark/failsafe-dark.css
deleted file mode 100644
index 97c521f3..00000000
--- a/src/css/tabs-dark/failsafe-dark.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.tab-failsafe .number input {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-failsafe .number input:disabled {
-    background-color: #393b3a;
-    color: grey;
-}
-
-.tab-failsafe .radioarea {
-    background-color: #393b3a;
-}
-
-.tab-failsafe .gui_box span {
-    color: white;
-}
-
-.tab-failsafe .stage1 select {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-failsafe .modename {
-    background-color: #393b3a;
-}
-
-.tab-failsafe .switchMode {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-failsafe .pro1 {
-    background-image: url(../../images/icons/cf_failsafe_procedure1-dark.svg);
-}
-
-.tab-failsafe .pro2 {
-    background-image: url(../../images/icons/cf_failsafe_procedure2-dark.svg);
-}
-
-.tab-failsafe .pro4 {
-    background-image: url(../../images/icons/cf_failsafe_procedure4-dark.svg);
-}
-
diff --git a/src/css/tabs-dark/firmware_flasher-dark.css b/src/css/tabs-dark/firmware_flasher-dark.css
deleted file mode 100644
index f945fb32..00000000
--- a/src/css/tabs-dark/firmware_flasher-dark.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.btn .disabled {
-    background-color: #393b3a;
-}
-
-.gui_note .gui_box_titlebar {
-    color: black;
-}
-
-.tab-firmware_flasher .options select {
-    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 .target {
-    color: #98ddff;
-}
-
-.tab-firmware_flasher .cf_table td {
-    border-bottom: solid 1px #4f4f4f;
-}
diff --git a/src/css/tabs-dark/gps-dark.css b/src/css/tabs-dark/gps-dark.css
deleted file mode 100644
index 455c8dbb..00000000
--- a/src/css/tabs-dark/gps-dark.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.tab-gps .GPS_info .head, .tab-gps .GPS_signal_strength .head {
-    background-color: #393b3a;
-}
-
-.tab-gps #loadmap .controls {
-    background-color: #393b3a;
-}
-
-.tab-gps #loadmap .controls a {
-    background-color: #393b3a;
-}
-
-.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;
-}
\ No newline at end of file
diff --git a/src/css/tabs-dark/help-dark.css b/src/css/tabs-dark/help-dark.css
deleted file mode 100644
index d70251ed..00000000
--- a/src/css/tabs-dark/help-dark.css
+++ /dev/null
@@ -1 +0,0 @@
-/* nothing changed for dark mode */
diff --git a/src/css/tabs-dark/landing-dark.css b/src/css/tabs-dark/landing-dark.css
deleted file mode 100644
index 4861dbd9..00000000
--- a/src/css/tabs-dark/landing-dark.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.tab-landing .content_top {
-    background-color: #00000000;
-}
-
-.tab-landing .content_mid {
-    background-color: #3e3e3e;
-}
-
-.tab-landing .logowrapper img {
-    content:url(/images/cf_logo_black.svg);
-}
-
-.tab-landing .content_mid .text3 .wrap2 {
-    background: #5f5f5f;
-}
-
diff --git a/src/css/tabs-dark/led_strip-dark.css b/src/css/tabs-dark/led_strip-dark.css
deleted file mode 100644
index 9aa0fd1a..00000000
--- a/src/css/tabs-dark/led_strip-dark.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.tab-led-strip .section {
-    color: #c4c4c4;
-}
-
-.tab-led-strip .mainGrid {
-    background-color: #4e4e4e;
-}
-
-.tab-led-strip button {
-    background-color: #6b6b6b;
-    color: white;
-}
-
-.tab-led-strip button:hover {
-    border: 1px solid #ffffff;
-    background-color: #393b3a;
-}
-
-.tab-led-strip .gridSections,
-.tab-led-strip .gridSections .block {
-    border: none;
-}
diff --git a/src/css/tabs-dark/logging-dark.css b/src/css/tabs-dark/logging-dark.css
deleted file mode 100644
index e3cd682e..00000000
--- a/src/css/tabs-dark/logging-dark.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.tab-logging .speed {
-    background-color: #3a3a3a;
-    color: white;
-}
diff --git a/src/css/tabs-dark/motors-dark.css b/src/css/tabs-dark/motors-dark.css
deleted file mode 100644
index 73adc4e1..00000000
--- a/src/css/tabs-dark/motors-dark.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.tab-motors .plot_control {
-    background-color: #393b3a;
-}
-
-.tab-motors .plot_control select {
-  background-color: #3a3a3a;
-  color: white;
-}
-
-.tab-motors .motorblock {
-    background-color: #393b3a;
-}
-
-.tab-motors .m-block {
-    background-color: #393b3a;
-}
-
-.tab-motors .m-block .label {
-    color: white;
-}
-
-.tab-motors .m-block .meter-bar {
-    background-color: #393b3a;
-}
-
-.tab-motors .motor_testing .notice {
-    background-color: #4e4e4e;
-}
diff --git a/src/css/tabs-dark/onboard_logging-dark.css b/src/css/tabs-dark/onboard_logging-dark.css
deleted file mode 100644
index 32aebb34..00000000
--- a/src/css/tabs-dark/onboard_logging-dark.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.tab-onboard_logging .regular-button.disabled {
-    background-color: #393b3a;
-}
-
-.tab-onboard_logging .dataflash-contents,
-.tab-onboard_logging .sdcard-contents {
-    background-color: #393b3a;
-}
-
-.tab-onboard_logging .dataflash-used,
-.tab-onboard_logging .sdcard-other {
-    background-color: #848484;
-}
-
-.tab-onboard_logging progress::-webkit-progress-bar {
-    background-color: #393b3a;
-}
-
-.tab-onboard_logging .blackboxRate select,
-.tab-onboard_logging .blackboxDebugMode select,
-.tab-onboard_logging .blackboxDevice select {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-onboard_logging .sdcard-icon {
-    background-color: #393b3a;
-}
diff --git a/src/css/tabs-dark/osd-dark.css b/src/css/tabs-dark/osd-dark.css
deleted file mode 100644
index be2d9c79..00000000
--- a/src/css/tabs-dark/osd-dark.css
+++ /dev/null
@@ -1,27 +0,0 @@
-.tab-osd .display-layout input.position {
-    border-bottom: 1px solid red;
-}
-
-.tab-osd .preview {
-    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../../images/osd-bg-1.jpg);
-    background-size: cover;
-}
-
-/* these two items replace the look of the checkboxes in only CSS */
-.tab-osd input[type='checkbox']:after {
-    line-height: 1.5em;
-    content: '';
-    display: inline-block;
-    width: 12px;
-    height: 12px;
-    margin-top: -1px;
-    margin-left: -1px;
-    border: 1px solid #404040;
-    border-radius: 0.25em;
-    background: #4d4d4d;
-}
-
-.tab-osd input[type='checkbox']:checked:after {
-    background: #ffbb00;
-    border: 1px solid #404040;
-}
diff --git a/src/css/tabs-dark/pid_tuning-dark.css b/src/css/tabs-dark/pid_tuning-dark.css
deleted file mode 100644
index dce5d480..00000000
--- a/src/css/tabs-dark/pid_tuning-dark.css
+++ /dev/null
@@ -1,141 +0,0 @@
-.tab-pid_tuning .profile .helpicon,
-.tab-pid_tuning .rate_profile .helpicon,
-.tab-pid_tuning .pid_titlebar .helpicon {
-    background-image: url(../../images/icons/cf_icon_info_grey.svg);
-    opacity: 0.4;
-}
-.tab-pid_tuning .profile .helpicon:hover,
-.tab-pid_tuning .rate_profile .helpicon:hover,
-.tab-pid_tuning .pid_titlebar .helpicon:hover {
-    opacity: 1;
-}
-
-.tab-pid_tuning .throttle_limit th {
-    background-color: #393b3a;
-    border-bottom: 1px solid #5e5e5e;
-}
-
-.tab-pid_tuning .cf tr {
-    background-color: #414443;
-}
-
-.tab-pid_tuning .cf th {
-    background-color: var(--quietHeader);
-    color: white;
-}
-
-.tab-pid_tuning .cf input {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-pid_tuning .cf select {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-/* These values should have been inherited from the regular style, but are not */
-.tab-pid_tuning .pid_titlebar .wide_header {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
-}
-
-.tab-pid_tuning table.compensation .suboption select{
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-pid_tuning table input,.inputBackground {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-pid_tuning table select {
-    text-align-last: right;
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-pid_tuning .tab-container > div {
-    background-color: #535655;
-    border-right: 1px solid #393b3a;
-}
-
-.fancy.header {
-  background-color: #393b3a;
-}
-
-.pid_roll {
-    background-color: #A00000;
-}
-
-.pid_pitch {
-    background-color: #00A000;
-}
-
-.pid_yaw {
-    background-color: #0000A0;
-}
-
-
-.pid_mode {
-    background-color: #3c3c3c;
-    border-bottom: 1px solid #3c3c3c;
-    color: white;
-}
-
-.pid_titlebar {
-    background-color: #393b3a;
-}
-
-.tab-pid_tuning .number input {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-pid_tuning .gui_box span {
-    color: white;
-}
-
-.tab-pid_tuning .bottomarea {
-    background-color: #393b3a;
-}
-
-.tab-pid_tuning .profile select {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-pid_tuning .rate_profile select {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tabarea {
-    background: #393b3a;
-}
-
-.tab-pid_tuning .regular-button.disabled {
-    background-color: #393b3a;
-}
-
-.tab-pid_tuning .sliderLabels th {
-    background: #414443;
-    color: white;
-}
-
-.tab-pid_tuning input:disabled,
-.tab-pid_tuning .cf input:disabled,
-.tab-pid_tuning select:disabled,
-.tab-pid_tuning .cf select:disabled {
-    color: rgb(105, 105, 105);
-    background-color: #2d2d2d;
-}
-
-.tab-pid_tuning table.compensation tr {
-    border-bottom: 1px solid #6b6b6b;
-}
-
-.tab-pid_tuning .slidersWarning {
-    background: #542415;
-}
diff --git a/src/css/tabs-dark/ports-dark.css b/src/css/tabs-dark/ports-dark.css
deleted file mode 100644
index 9b148818..00000000
--- a/src/css/tabs-dark/ports-dark.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.tab-ports table td:first-child {
-    border-left: none;
-}
-.tab-ports table td:last-child {
-    border-right: none;
-}
-
-.tab-ports .ports tr:last-child,
-.tab-ports .ports tr:last-child td {
-    border-bottom: none;
-}
-
-.tab-ports table td {
-    border-bottom: 1px solid #575757;
-    border-left: 1px solid #575757;
-    border-right: 1px solid #575757;
-}
diff --git a/src/css/tabs-dark/power-dark.css b/src/css/tabs-dark/power-dark.css
deleted file mode 100644
index 0f6fa099..00000000
--- a/src/css/tabs-dark/power-dark.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.tab-power .number input {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-power .battery-configuration select {
-    background-color: #3a3a3a;
-    color: white;
-}
diff --git a/src/css/tabs-dark/receiver-dark.css b/src/css/tabs-dark/receiver-dark.css
deleted file mode 100644
index 7aba0dbc..00000000
--- a/src/css/tabs-dark/receiver-dark.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.tab-receiver select {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-receiver .bars .meter-bar {
-    background-color: #393b3a;
-}
-
-.tab-receiver .bars .meter-bar .label {
-    color: white;
-}
-
-.tab-receiver .tunings {
-    background-color: #393b3a;
-}
-
-.tab-receiver .tunings table td {
-    background: #414443;
-}
-
-.tab-receiver .tunings table tr:nth-child(odd) {
-    background-color: #393b3a;
-}
-
-.tab-receiver .tunings table input {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-receiver .rssi_channel_wrapper {
-    background-color: #414443;
-    border-bottom: 1px solid #4d4d4d;
-    border-right: 1px solid #4d4d4d;
-}
-
-.tab-receiver .rcmap_wrapper {
-    background-color: #414443;
-    border-left: 1px solid #4d4d4d;
-    border-bottom: 1px solid #4d4d4d;
-}
-
-.tab-receiver .hybrid_element {
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-}
-
-.tab-receiver .hybrid_element input {
-    background-color: #3a3a3a;
-    color: white;
-}
diff --git a/src/css/tabs-dark/sensors-dark.css b/src/css/tabs-dark/sensors-dark.css
deleted file mode 100644
index 03197e83..00000000
--- a/src/css/tabs-dark/sensors-dark.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.tab-sensors .plot_control {
-    background-color: #2f2f2f;
-}
-
-.tab-sensors .plot_control select {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-sensors text {
-    fill: white;
-}
diff --git a/src/css/tabs-dark/servos-dark.css b/src/css/tabs-dark/servos-dark.css
deleted file mode 100644
index c0de6935..00000000
--- a/src/css/tabs-dark/servos-dark.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.tab-servos table th {
-    background: #828885;
-}
-
-.tab-servos table tr:nth-child(even) {
-    background-color: #2f2f2f;
-}
-
-.tab-servos table .main {
-    background-color: #393b3a;
-}
-
-.tab-servos table input[type="number"] {
-    background-color: #3a3a3a;
-    color: white;
-}
-
-.tab-servos .direction .rate {
-    background-color: #3a3a3a;
-    color: white;
-}
diff --git a/src/css/tabs-dark/setup-dark.css b/src/css/tabs-dark/setup-dark.css
deleted file mode 100644
index d0419881..00000000
--- a/src/css/tabs-dark/setup-dark.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.tab-setup #interactive_block {
-    background-color: #393b3a;
-}
-
-.tab-setup .attitude_info {
-    color: white;
-}
-
-.tab-setup #interactive_block a.reset {
-    color: white;
-    background-color: #575757;
-}
-
-.tab-setup #interactive_block a.reset:hover {
-    background-color: #393b3a;
-}
diff --git a/src/css/tabs-dark/transponder-dark.css b/src/css/tabs-dark/transponder-dark.css
deleted file mode 100644
index 428f5a8b..00000000
--- a/src/css/tabs-dark/transponder-dark.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.tab-transponder .text .disabled {
-    background-color: #393b3a;
-}
-
-.tab-transponder .gui_box span {
-    color: white;
-}
diff --git a/src/js/DarkTheme.js b/src/js/DarkTheme.js
index 97ca49a6..384e691d 100644
--- a/src/js/DarkTheme.js
+++ b/src/js/DarkTheme.js
@@ -1,37 +1,17 @@
 'use strict';
 
 var css_dark = [
-    './css/main-dark.css',
-    './css/tabs-dark/landing-dark.css',
-    './css/tabs-dark/setup-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',
-]
+    './css/dark-theme.css',
+];
 
 var DarkTheme = {
     configEnabled: undefined,
 };
+
 DarkTheme.isDarkThemeEnabled = function (val) {
     return val === 0 || val === 2 && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-}
+};
+
 DarkTheme.setConfig = function (result) {
     if (this.configEnabled != result) {
         this.configEnabled = result;
diff --git a/src/js/tabs/receiver_msp.js b/src/js/tabs/receiver_msp.js
index 39d4686a..c534b017 100644
--- a/src/js/tabs/receiver_msp.js
+++ b/src/js/tabs/receiver_msp.js
@@ -1,7 +1,7 @@
 "use strict";
 
 let css_dark = [
-    '/css/main-dark.css'
+    '/css/dark-theme.css'
   ];
 
 
diff --git a/src/main.html b/src/main.html
index 9f036852..055dc184 100644
--- a/src/main.html
+++ b/src/main.html
@@ -38,29 +38,7 @@
     <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 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/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 type="text/css" rel="stylesheet" href="./css/dark-theme.css" media="all" 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>
diff --git a/src/tabs/receiver_msp.html b/src/tabs/receiver_msp.html
index a0d0dcac..8bed2653 100644
--- a/src/tabs/receiver_msp.html
+++ b/src/tabs/receiver_msp.html
@@ -14,7 +14,7 @@
 <link type="text/css" rel="stylesheet" href="/css/main.css" media="all" />
 <link type="text/css" rel="stylesheet" href="/css/tabs/receiver_msp.css" media="all" />
 
-<link type="text/css" rel="stylesheet" href="/css/main-dark.css" media="all" disabled/>
+<link type="text/css" rel="stylesheet" href="/css/dark-theme.css" media="all" disabled/>
 </head>
 <body>
     <div class="control-gimbals">