prioritize --lovelace-background over --primary-background-color for …

…background elements as HA bug causes default theme primary-background-color to overwrite theme color
Nerwyn · Dec 29, 2024 · 62ce265 · 62ce265
1 parent 2e12d27
commit 62ce265
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 11 deletions.
diff --git a/dist/universal-remote-card.min.js b/dist/universal-remote-card.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "universal-remote-card",
-	"version": "4.3.2",
+	"version": "4.3.3",
 	"description": "Universal Remote Card",
 	"main": "./dist/universal-remote-card.min.js",
 	"scripts": {

diff --git a/src/classes/remote-slider.ts b/src/classes/remote-slider.ts
@@ -458,7 +458,13 @@ export class RemoteSlider extends BaseRemoteElement {
 					overflow: hidden;
 					height: var(--height);
 					align-self: center;
-					color: var(--background, var(--primary-background-color));
+					color: var(
+						--background,
+						var(
+							--lovelace-background,
+							var(--primary-background-color)
+						)
+					);
 				}
 
 				.background {
@@ -467,7 +473,10 @@ export class RemoteSlider extends BaseRemoteElement {
 					height: var(--background-height, 100%);
 					background: var(
 						--background,
-						var(--primary-background-color)
+						var(
+							--lovelace-background,
+							var(--primary-background-color)
+						)
 					);
 				}
 
@@ -553,7 +562,13 @@ export class RemoteSlider extends BaseRemoteElement {
 				.icon {
 					color: var(
 						--icon-color,
-						var(--background, var(--primary-background-color))
+						var(
+							--background,
+							var(
+								--lovelace-background,
+								var(--primary-background-color)
+							)
+						)
 					);
 
 					--mdc-icon-size: var(--size, 32px);

diff --git a/src/classes/remote-touchpad.ts b/src/classes/remote-touchpad.ts
@@ -365,8 +365,8 @@ export class RemoteTouchpad extends BaseRemoteElement {
 					width: -webkit-fill-available;
 					width: fill-available;
 					background: var(
-						--primary-background-color,
-						rgb(111, 118, 125)
+						--lovelace-background,
+						var(--primary-background-color, rgb(111, 118, 125))
 					);
 					touch-action: none;
 					text-align: center;