diff --git a/src/003-assets/CSS/tabs.css b/src/003-assets/CSS/tabs.css
index 6076e6b370d7eb4cc90280436768323b287d6e46..dfbbd57abb7104b61f994bbd2e0fa052532a8e3d 100644
--- a/src/003-assets/CSS/tabs.css
+++ b/src/003-assets/CSS/tabs.css
@@ -1,24 +1,11 @@
-div.tabbar button.show-warning { /* dumb name, but warning and error already exist */
-	background-color: #b30000;
-	border-color: #b30000;
-}
-
-div.tabbar button.show-warning:hover {
-	background-color: #e60000
-}
-
-div.tabbar button.show-warning.active {
-	background-color: #4d0000;
-}
-
 div.tabbar {
 	overflow: hidden;
 }
 
 div.tabbar button {
-	background-color: #252525;
-	border: solid 2px #252525;
-	color: #68d;
+	background-color: var(--button-color);
+	border: solid 2px var(--button-color);
+	color: var(--link-color);
 	float: left;
 	outline: none;
 	cursor: pointer;
@@ -38,14 +25,27 @@ div.tabbar button.card.active {
 }
 
 div.tabbar button:hover {
-	background-color: #414141;
+	background-color: var(--button-hover-color);
 }
 
 div.tabbar button.active {
-	background-color: #050505;
+	background-color: var(--button-selected-color);
 	color: #c7cedf;
 }
 
+div.tabbar button.show-warning { /* dumb name, but warning and error already exist */
+	background-color: #b30000;
+	border-color: #b30000;
+}
+
+div.tabbar button.show-warning:hover {
+	background-color: #e60000
+}
+
+div.tabbar button.show-warning.active {
+	background-color: #4d0000;
+}
+
 div.tabbar a.active {
 	color: white;
 	pointer-events: none;
diff --git a/src/gui/css/mainStyleSheet.css b/src/gui/css/mainStyleSheet.css
index 8f40c12843f90db977aec4ab55ef0e883cd777eb..083a1985fe51bbd417f4718fbc95ced8beb78041 100644
--- a/src/gui/css/mainStyleSheet.css
+++ b/src/gui/css/mainStyleSheet.css
@@ -180,7 +180,7 @@ span.zeroButton > a:hover { text-decoration: none; }
 
 /* Colors are made as css classes, to allow them to be changed for a light color scheme (for example). */
 /* a version is for this case: <span class="-.."><a>text</a></span> */
-.link, .link a { color: #68D } /* link color */
+.link, .link a { color: var(--link-color) } /* link color */
 .aquamarine, .aquamarine a, .skill, .skill a { color: aquamarine }
 .coral, .coral a, .fetish.loss, .fetish.loss a { color: coral }
 .cyan, .cyan a { color: cyan } /* used for aphrodisiac & neighbor arcs */
@@ -240,7 +240,7 @@ white-space: normal;
 /* css rules for rules assistant */
 .rajs-listitem {
 	display: inline-block;
-	color: #68D;
+	color: var(--link-color);
 	margin-right: 1em;
 }
 .rajs-listitem.selected {