diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts
index 1bd6d1bf1f..f6f34d0f25 100644
--- a/src/panels/lovelace/cards/hui-picture-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts
@@ -199,11 +199,11 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: rgba(0, 0, 0, 0.3);
+        background-color: var(--ha-picture-card-background-color, rgba(0, 0, 0, 0.3));
         padding: 16px;
         font-size: 16px;
         line-height: 16px;
-        color: white;
+        color: var(--ha-picture-card-text-color, white);
       }
 
       .both {
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
index 72601e25ec..dd0999ffa0 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -314,11 +314,11 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: rgba(0, 0, 0, 0.3);
+        background-color: var(--ha-picture-card-background-color, rgba(0, 0, 0, 0.3));
         padding: 4px 8px;
         font-size: 16px;
         line-height: 40px;
-        color: white;
+        color: var(--ha-picture-card-text-color, white);
         display: flex;
         justify-content: space-between;
         flex-direction: row;
@@ -332,11 +332,11 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
       ha-icon-button {
         --mdc-icon-button-size: 40px;
         --disabled-text-color: currentColor;
-        color: #a9a9a9;
+        color: var(--ha-picture-icon-button-color, #a9a9a9);
       }
 
       ha-icon-button.state-on {
-        color: white;
+        color: var(--ha-picture-icon-button-on-color, white);
       }
       .state {
         display: block;