diff --git a/src/css/main.css b/src/css/main.css
index 95bf3493..4b95bc67 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -1,6 +1,7 @@
 :root {
     --accent: #ffbb00;
-    --subtleAccent: #ddd;
+    --error: red; 
+    --subtleAccent: #dddddd;
     --quietText: #ffffff;
     --quietHeader: #828885;
     --defaultText: #000000;
@@ -76,7 +77,7 @@ a.disabled {
 .cf_doc_version_bt a {
     padding: 1px 9px 1px 9px;
     margin-top: -45px;
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 3px;
     border: 1px solid #e8b423;
     color: #000;
@@ -127,11 +128,11 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .message-positive {
-    color: #ffbb00 !important;
+    color: var(--accent) !important;
 }
 
 .message-negative {
-    color: red !important;
+    color: var(--error);
     font-weight: bold;
 }
 
@@ -217,7 +218,7 @@ input[type="number"]::-webkit-inner-spin-button {
     border-radius: 3px;
     padding: 3px;
     margin-bottom: 5px;
-    color: #ddd;
+    color: var(--subtleAccent);
     position: absolute;
     margin-top: -59px;
     margin-left: -187px;
@@ -228,7 +229,7 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 #port-picker .auto_connect, .gray {
-    color: #ddd;
+    color: var(--subtleAccent);
 }
 
 #header_dataflash {
@@ -545,7 +546,7 @@ input[type="number"]::-webkit-inner-spin-button {
     float: left;
     height: calc(100% - 150px);
     width: 200px;
-    border-right: 4px solid #ffbb00;
+    border-right: 4px solid var(--accent);
     background-color: #2e2e2e;
     transition: all 0.2s;
 
@@ -618,7 +619,7 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 #tabs li.active a {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     color: #000;
     transition: none;
     text-shadow: 0px 1px rgba(255, 255, 255, 0.45);
@@ -627,7 +628,7 @@ input[type="number"]::-webkit-inner-spin-button {
 
 #tabs li.active a:hover {
     cursor: default;
-    background-color: #ffbb00;
+    background-color: var(--accent);
 }
 
 .tabicon {
@@ -1028,7 +1029,7 @@ dialog {
 
 /* Tab Title */
 .tab_title {
-    border-bottom: 1px solid #ffbb00;
+    border-bottom: 1px solid var(--accent);
     font-size: 20px;
     line-height: 24px;
     height: 30px;
@@ -1077,7 +1078,7 @@ dialog {
     margin-top: 0px;
     margin-bottom: 0px;
     margin-right: 20px;
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 3px;
     border: 1px solid #dba718;
     color: #000;
@@ -1100,7 +1101,7 @@ dialog {
 }
 
 .content_toolbar .btn a:active {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     transition: all ease 0.0s;
     box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35);
 }
@@ -1255,7 +1256,7 @@ dialog {
 }
 
 .gui_note .gui_box_titlebar {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%,
         rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%,
         rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%,
@@ -1323,7 +1324,7 @@ dialog {
     margin-top: 9px;
     margin-bottom: 0px;
     margin-right: 20px;
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 3px;
     border: 1px solid #dba718;
     color: #000;
@@ -1357,7 +1358,7 @@ dialog {
 .default_btn a {
     padding: 5px 0px 5px 0px;
     text-align: center;
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 4px;
     border: 1px solid #dba718;
     color: #000;
@@ -1398,7 +1399,7 @@ dialog {
     margin-top: 8px;
     margin-bottom: 8px;
     margin-right: 10px;
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 3px;
     border: 1px solid #dba718;
     color: #000;
@@ -1439,10 +1440,10 @@ dialog {
 }
 
 .small a:hover {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     color: #000;
     text-shadow: 0px 1px rgba(255, 255, 255, 0.25);
-    border: 1px solid #ffbb00;
+    border: 1px solid var(--accent);
     transition: all ease 0.2s;
 }
 
@@ -1453,7 +1454,7 @@ dialog {
 }
 
 .green a {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     text-shadow: 0px 1px rgba(255, 255, 255, 0.25);
     color: #000;
     border: 1px solid #dba718;
@@ -1507,7 +1508,7 @@ dialog {
 }
 
 .gps_true {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     padding: 1px 7px 2px 7px;
     border-radius: 3px;
     color: #FFFFFF;
@@ -1575,7 +1576,7 @@ dialog {
  }
 
 .connect_b a.connect {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border: 1px solid #dba718;
     background-image: url(../images/icons/cf_icon_usb2_white.svg);
     background-repeat: no-repeat;
@@ -1621,7 +1622,7 @@ dialog {
  }
 
 .firmware_b a.flash {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border: 1px solid #dba718;
     background-image: url(../images/icons/cf_icon_flasher_white.svg);
     background-repeat: no-repeat;
@@ -1754,7 +1755,7 @@ dialog {
 
 
 .dataflash-free_global {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 4px;
 }
 
@@ -1804,7 +1805,7 @@ dialog {
 }
 
 #expertMode {
-    color: #ddd;
+    color: var(--subtleAccent);
     margin-top: 27px;
     width:125px;
     float: right;
@@ -1875,7 +1876,7 @@ dialog {
     position: relative;
     box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20);
     border-radius: 0px;
-    background-color: #ffbb00;
+    background-color: var(--accent);
     /* border-radius: 4px; */
     margin-top: 0px;
 }
@@ -1940,7 +1941,7 @@ button {
 }
 
 button.active {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border: 1px solid #dba718;
     color: #000;
 }
@@ -2079,7 +2080,7 @@ input {
 
 .jBox-container {
     background: #fff;
-    border:1px solid #ffbb00;
+    border:1px solid var(--accent);
     font-size: 11px;
     line-height: 13px;
     color: #525352;
@@ -2103,5 +2104,5 @@ input {
 .jBox-pointer:after {
     width: 10px;
     height: 9px;
-    border:1px solid #ffbb00;
+    border:1px solid var(--accent);
 }
diff --git a/src/css/tabs/adjustments.css b/src/css/tabs/adjustments.css
index a631e0fb..59adf35f 100644
--- a/src/css/tabs/adjustments.css
+++ b/src/css/tabs/adjustments.css
@@ -3,7 +3,7 @@
 }
 
 .tab-adjustments .range .marker, .tab-adjustments .channel-slider .noUi-connect {
-    background: #ffbb00;
+    background: var(--accent);
     box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.6);
 }
 
diff --git a/src/css/tabs/auxiliary.css b/src/css/tabs/auxiliary.css
index 7cb29efd..416effd6 100644
--- a/src/css/tabs/auxiliary.css
+++ b/src/css/tabs/auxiliary.css
@@ -16,17 +16,17 @@
 }
 
 .tab-auxiliary .range .marker, .tab-auxiliary .channel-slider .noUi-connect {
-    background: #ffbb00;
+    background: var(--accent);
     border-radius: 3px;
 }
 
 .tab-auxiliary .mode.on .info {
-    background: #ffbb00;
+    background: var(--accent);
     color: black;
 }
 
 .tab-auxiliary .mode.on:nth-child(odd) .info {
-    background: #ffbb00;
+    background: var(--accent);
 }
 
 .tab-auxiliary .mode.off .info {
diff --git a/src/css/tabs/help.css b/src/css/tabs/help.css
index bd3e5974..d109915d 100644
--- a/src/css/tabs/help.css
+++ b/src/css/tabs/help.css
@@ -28,7 +28,7 @@
 }
 
 .tab-help li span a {
-    color: #ffbb00;
+    color: var(--accent);
 }
 
 .tab-help .subline {
diff --git a/src/css/tabs/landing.css b/src/css/tabs/landing.css
index d0252c8e..aeb9154e 100644
--- a/src/css/tabs/landing.css
+++ b/src/css/tabs/landing.css
@@ -21,7 +21,7 @@
 }
 
 .tab-landing .content_mid {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     overflow: hidden;
 }
 
@@ -193,7 +193,7 @@
 #changelog .wrapper {
     height: 100%;
     padding: 0 20px;
-    border-left: 5px solid #ffbb00;
+    border-left: 5px solid var(--accent);
     overflow-y: auto;
     display: none;
 }
@@ -203,7 +203,7 @@
     top: 50px;
     right: 215px;
     position: absolute;
-    background: #ffbb00;
+    background: var(--accent);
     border-radius: 5px 5px 0 0;
     border-bottom: none;
     height: 30px;
@@ -269,7 +269,7 @@
 #privacy_policy .wrapper {
     height: 100%;
     padding: 0 20px;
-    border-left: 5px solid #ffbb00;
+    border-left: 5px solid var(--accent);
     overflow-y: auto;
     display: none;
 }
@@ -279,7 +279,7 @@
     top: 170px;
     right: 450px;
     position: absolute;
-    background: #ffbb00;
+    background: var(--accent);
     border-radius: 5px 5px 0 0;
     border-bottom: none;
     height: 30px;
diff --git a/src/css/tabs/led_strip.css b/src/css/tabs/led_strip.css
index 8023ef15..d11285c2 100644
--- a/src/css/tabs/led_strip.css
+++ b/src/css/tabs/led_strip.css
@@ -392,7 +392,7 @@
 
 .tab-led-strip .wires-remaining div {
     font-size: 40px;
-    color: #ffbb00;
+    color: var(--accent);
     margin-bottom: -5px;
     margin-top: -10px;
 }
diff --git a/src/css/tabs/motors.css b/src/css/tabs/motors.css
index 930e38e4..572e6e3c 100644
--- a/src/css/tabs/motors.css
+++ b/src/css/tabs/motors.css
@@ -53,7 +53,7 @@
 }
 
 .tab-motors .plot_control .motor-button a {
-  background-color: #ffbb00;
+  background-color: var(--accent);
   border-radius: 3px;
   border: 1px solid #e8b423;
   color: #000;
diff --git a/src/css/tabs/onboard_logging.css b/src/css/tabs/onboard_logging.css
index 1420e54f..3649eb6e 100644
--- a/src/css/tabs/onboard_logging.css
+++ b/src/css/tabs/onboard_logging.css
@@ -2,7 +2,7 @@
     margin-top: 8px;
     margin-bottom: 8px;
     margin-right: 10px;
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 3px;
     border: 1px solid #dba718;
     color: #000;
@@ -145,7 +145,7 @@
 
 .tab-onboard_logging .dataflash-used,
 .tab-onboard_logging .sdcard-other {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 4px;
 }
 
diff --git a/src/css/tabs/pid_tuning.css b/src/css/tabs/pid_tuning.css
index 77780375..a689e4ba 100644
--- a/src/css/tabs/pid_tuning.css
+++ b/src/css/tabs/pid_tuning.css
@@ -394,7 +394,7 @@
 }
 
 .tab-pid_tuning .tab_container td.active {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     color: #000;
     transition: none;
     height: 27px;
@@ -403,7 +403,7 @@
 }
 
 .tab-pid_tuning .tab_container td.active a {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     color: #000;
     text-shadow: 0px 1px rgba(255, 255, 255, 0.45);
 }
@@ -811,7 +811,7 @@ width: 40%;
 }
 
 .tab-pid_tuning .tabboarder {
-    background-color: #ffbb00;
+    background-color: var(--accent);
     float: left;
     width: 100%;
     height: 3px;
@@ -850,7 +850,7 @@ width: 40%;
     margin-top: 8px;
     margin-bottom: 8px;
     margin-right: 10px;
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 3px;
     border: 1px solid #dba718;
     color: #000;
diff --git a/src/css/tabs/receiver_msp.css b/src/css/tabs/receiver_msp.css
index daa0b98e..0f2b5047 100644
--- a/src/css/tabs/receiver_msp.css
+++ b/src/css/tabs/receiver_msp.css
@@ -120,7 +120,7 @@ a:hover {
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: 0px;
-    background-color: #ffbb00;
+    background-color: var(--accent);
     border-radius: 3px;
     border: 1px solid #4c8829;
     color: #fff;