diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index 83058920c9..cacacc7efc 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -154,6 +154,15 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
         ha-card {
           position: relative;
           overflow: hidden;
+          --brightness-font-color: white;
+          --brightness-font-text-shadow:
+            -1px -1px 0 #000,
+            1px -1px 0 #000,
+            -1px 1px 0 #000,
+            1px 1px 0 #000;
+          --name-font-size: 1.2rem;
+          --brightness-font-size: 1.2rem;
+          --rail-border-color: transparent;
         }
         #tooltip {
           position: absolute;
@@ -183,12 +192,12 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
           background-color: var(--primary-color);
         }
         #light .rs-path-color  {
-            background-color: #d6d6d6;
+            background-color: var(--disabled-text-color);
         }
         #light .rs-handle  {
-            background-color: #FFF;
+            background-color: var(--paper-card-background-color, white);
             padding: 7px;
-            border: 2px solid #d6d6d6;
+            border: 2px solid var(--disabled-text-color);
         }
         #light .rs-handle.rs-focus  {
             border-color:var(--primary-color);
@@ -198,7 +207,11 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
             background-color: var(--primary-color);
         }
         #light .rs-border  {
-          border-color: transparent;
+          border-color: var(--rail-border-color);
+        }
+        #light .rs-inner.rs-bg-color.rs-border,
+        #light .rs-overlay.rs-transition.rs-bg-color {
+          background-color: var(--paper-card-background-color, white);
         }
         ha-icon {
           margin: auto;
@@ -215,10 +228,10 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
         }
         .name {
           padding-top: 40px;
-          font-size: 1.2rem;
+          font-size: var(--name-font-size);
         }
         .brightness {
-          font-size: 1.2rem;
+          font-size: var(--brightness-font-size);
           position: absolute;
           margin: 0 auto;
           left: 50%;
@@ -229,12 +242,8 @@ export class HuiLightCard extends hassLocalizeLitMixin(LitElement)
           -moz-transition: opacity .5s ease-in-out;
           -webkit-transition: opacity .5s ease-in-out;
           cursor: pointer;
-          color: white;
-          text-shadow:
-            -1px -1px 0 #000,
-            1px -1px 0 #000,
-            -1px 1px 0 #000,
-            1px 1px 0 #000;
+          color: var(--brightness-font-color);
+          text-shadow: var(--brightness-font-text-shadow)
         }
         .show_brightness {
           opacity: 1;
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index c9277f2e5f..adae97a618 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -182,25 +182,31 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
       }
       ha-card {
         overflow: hidden;
+        --rail-border-color: transparent;
+        --auto-color: green;
+        --cool-color: #2b9af9;
+        --heat-color: #FF8100;
+        --off-color: #8a8a8a;
+        --unknown-color: #bac;
       }
       #root {
         position: relative;
         overflow: hidden;
       }
       .auto {
-        --mode-color: green;
+        --mode-color: var(--auto-color);
       }
       .cool {
-        --mode-color: #2b9af9;
+        --mode-color: var(--cool-color);
       }
       .heat {
-        --mode-color: #FF8100;
+        --mode-color: var(--heat-color);
       }
       .off {
-        --mode-color: #8a8a8a;
+        --mode-color: var(--off-color);
       }
       .unknown-mode {
-        --mode-color: #bac;
+        --mode-color: var(--unknown-color);
       }
       .no-title {
         --title-margin-top: 33% !important;
@@ -245,12 +251,12 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
         background-color: var(--mode-color, var(--disabled-text-color));
       }
       #thermostat .rs-path-color  {
-          background-color: #d6d6d6;
+          background-color: var(--disabled-text-color);
       }
       #thermostat .rs-handle  {
-          background-color: #FFF;
+          background-color: var(--paper-card-background-color, white);
           padding: 7px;
-          border: 2px solid #d6d6d6;
+          border: 2px solid var(--disabled-text-color);
       }
       #thermostat .rs-handle.rs-focus  {
           border-color: var(--mode-color, var(--disabled-text-color));
@@ -260,11 +266,15 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
           background-color: var(--mode-color, var(--disabled-text-color));
       }
       #thermostat .rs-border  {
-        border-color: transparent;
+        border-color: var(--rail-border-color);
       }
       #thermostat .rs-bar.rs-transition.rs-first, .rs-bar.rs-transition.rs-second{
         z-index: 20 !important;
       }
+      #thermostat .rs-inner.rs-bg-color.rs-border,
+      #thermostat .rs-overlay.rs-transition.rs-bg-color {
+        background-color: var(--paper-card-background-color, white);
+      }
       #tooltip {
         position: absolute;
         top: 0;
@@ -273,6 +283,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
         height: 100%;
         text-align: center;
         z-index: 15;
+        color: var(--primary-text-color);
       }
       #set-temperature {
         font-size: var(--set-temperature-font-size);