diff --git a/rpg-docs/client/views/character/stats/healthCard/healthCard.css b/rpg-docs/client/views/character/stats/healthCard/healthCard.css
index f10db0f1..c1d00f05 100644
--- a/rpg-docs/client/views/character/stats/healthCard/healthCard.css
+++ b/rpg-docs/client/views/character/stats/healthCard/healthCard.css
@@ -3,18 +3,6 @@
 	margin-right: 8px;
 }
 
-.healthCard #temporaryHitPointSlider {
-	--paper-diff-slider-active-color: #009688; /* teal */
-	--paper-diff-slider-knob-color: #009688; /* these don't seem to work? */
-	--paper-diff-slider-pin-color: #009688;
-}
-
-.healthCard .extraHitPointSlider {
-	--paper-diff-slider-active-color: #00BCD4; /* cyan */
-	--paper-diff-slider-knob-color: #00BCD4; /* these don't seem to work? */
-	--paper-diff-slider-pin-color: #00BCD4;
-}
-
 .healthCard .bottom-border {
 	border-bottom: rgba(0,0,0,0.24) solid 1px;
 	margin-bottom: 12px;
diff --git a/rpg-docs/public/custom_components/app-theme.html b/rpg-docs/public/custom_components/app-theme.html
index 1b90d2a2..e84c18cb 100644
--- a/rpg-docs/public/custom_components/app-theme.html
+++ b/rpg-docs/public/custom_components/app-theme.html
@@ -60,4 +60,14 @@
 			color: rgba(255,255,255,0.87) !important;
 		}
 	}
+	.healthCard #temporaryHitPointSlider {
+		--paper-diff-slider-active-color: #009688; /* teal */
+		--paper-diff-slider-knob-color: #009688;
+		--paper-diff-slider-pin-color: #009688;
+	}
+	.healthCard .extraHitPointSlider {
+		--paper-diff-slider-active-color: #00BCD4; /* cyan */
+		--paper-diff-slider-knob-color: #00BCD4;
+		--paper-diff-slider-pin-color: #00BCD4;
+	}
 </style>