diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index a84dbf81..6dc390fc 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -14,10 +14,10 @@ body {
     color: var(--text-color);
 }
 a {
-    color: rgb(0, 102, 204);
+    color: var(--link-color);
 }
 a:visited {
-    color: rgb(0, 102, 204);
+    color: var(--link-color);
 }
 label {
     font-size: 10pt;
@@ -144,7 +144,7 @@ code {
     opacity: 0;
 }
 .imgPreviewItemClearBtn:hover {
-    background: rgb(177, 27, 0);
+    background: var(--button-hover-background);
 }
 .imgContainer:hover > .imgItemInfo {
     opacity: 1;
@@ -192,7 +192,7 @@ code {
     width: 100%;
 }
 .settings-box label small {
-    color: rgb(153, 153, 153);
+    color: var(--small-label-color);
     margin-right: 10px;
 }
 #preview {
@@ -220,11 +220,11 @@ code {
     height: 30pt;
 }
 #makeImage:hover {
-    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    background: var(--button-hover-background);
 }
 #stopImage {
     flex: 0 0 70px;
-    background: rgb(132, 8, 0);
+    background: var(--secondary-button-background);
     border: 2px solid rgb(122, 29, 0);
     color: rgb(255, 221, 255);
     height: 30pt;
@@ -232,7 +232,7 @@ code {
     flex-grow: 2;
 }
 #stopImage:hover {
-    background: rgb(177, 27, 0);
+    background: var(--secondary-button-hover-background);
 }
 #undo {
     float: right;
@@ -496,11 +496,11 @@ div.img-preview img {
 }
 #server-status-color {
     font-size: 14pt;
-    color: rgb(200, 139, 0);
+    color: var(--status-orange);
     display: inline;
 }
 #server-status-msg {
-    color: rgb(200, 139, 0);
+    color: var(--status-orange);
     padding-left: 2pt;
     font-size: 10pt;
 }
@@ -707,14 +707,14 @@ div.img-preview img {
     padding: 3pt 6pt;
 }
 .secondaryButton {
-    background: rgb(132, 8, 0);
+    background: var(--secondary-button-background);
     border: 1px solid rgb(122, 29, 0);
     color: rgb(255, 221, 255);
     padding: 3pt 6pt;
     border-radius: 5px;
 }
 .secondaryButton:hover {
-    background: rgb(177, 27, 0);
+    background: var(--secondary-button-hover-background);
 }
 .tertiaryButton {
     background: var(--tertiary-background-color);
@@ -724,12 +724,12 @@ div.img-preview img {
     border-radius: 5px;
 }
 .tertiaryButton:hover {
-    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    background: var(--button-hover-background);
     color: var(--accent-text-color);
 }
 .tertiaryButton.pressed {
     border-style: inset;
-    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    background: var(--button-hover-background);
     color: var(--accent-text-color);
 }
 .useSettings {
@@ -949,7 +949,7 @@ input::file-selector-button,
 button:hover,
 .button:hover {
   transition-duration: 0.1s;
-  background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+  background: var(--button-hover-background);
 }
 
 input::file-selector-button {
@@ -1266,7 +1266,7 @@ input::file-selector-button {
 
 .popup {
     position: absolute;
-    background: rgba(32, 33, 36, 50%);
+    background: var(--backdrop-color);
     top: 0px;
     left: 0px;
     right: 0px;
diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css
index e9eca84f..1fd77b25 100644
--- a/ui/media/css/themes.css
+++ b/ui/media/css/themes.css
@@ -13,6 +13,8 @@
     --accent-lightness-hover: 40%;
 
     --text-color: #eee;
+    --link-color: rgb(0, 102, 204);
+    --small-label-color: rgb(153, 153, 153);
 
 	--input-text-color: #eee;
     --input-background-color: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (0.7 * var(--value-step))));
@@ -21,6 +23,9 @@
     --button-text-color: var(--input-text-color);
     --button-color: var(--input-background-color);
     --button-border: none;
+    --button-hover-background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    --secondary-button-background: rgb(132, 8, 0);
+    --secondary-button-hover-background: rgb(177, 27, 0);
 
     /* other */
     --input-border-radius: 4px;
@@ -40,6 +45,7 @@
     --status-orange: rgb(200, 139, 0);
     --status-green: green;
     --status-red: red;
+    --backdrop-color: rgba(32, 33, 36, 50%);
 }
 
 .theme-light {