From d0a60984edbfa7bdc915eaba32be77019c402bd1 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 11 Sep 2023 18:18:39 +0200
Subject: [PATCH] Allow user to theme all cover states in tile card and more
 info. (#17898)

---
 .../components/cover/ha-more-info-cover-position.ts        | 7 ++++---
 .../components/cover/ha-more-info-cover-tilt-position.ts   | 7 ++++---
 .../tile-features/hui-cover-position-tile-feature.ts       | 6 ++++--
 .../tile-features/hui-cover-tilt-position-tile-feature.ts  | 6 ++++--
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts b/src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts
index 702a74c9e3..e1dfeb91c5 100644
--- a/src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts
+++ b/src/dialogs/more-info/components/cover/ha-more-info-cover-position.ts
@@ -35,9 +35,8 @@ export class HaMoreInfoCoverPosition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
-
-    const color = stateColorCss(this.stateObj, forcedState);
+    const openColor = stateColorCss(this.stateObj, "open");
+    const color = stateColorCss(this.stateObj);
 
     return html`
       <ha-control-slider
@@ -55,6 +54,8 @@ export class HaMoreInfoCoverPosition extends LitElement {
           "current_position"
         )}
         style=${styleMap({
+          // Use open color for inactive state to avoid grey slider that looks disabled
+          "--state-cover-inactive-color": openColor,
           "--control-slider-color": color,
           "--control-slider-background": color,
         })}
diff --git a/src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts b/src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts
index db9345937a..cf23456e86 100644
--- a/src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts
+++ b/src/dialogs/more-info/components/cover/ha-more-info-cover-tilt-position.ts
@@ -72,9 +72,8 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
-
-    const color = stateColorCss(this.stateObj, forcedState);
+    const openColor = stateColorCss(this.stateObj, "open");
+    const color = stateColorCss(this.stateObj);
 
     return html`
       <ha-control-slider
@@ -91,6 +90,8 @@ export class HaMoreInfoCoverTiltPosition extends LitElement {
           "current_tilt_position"
         )}
         style=${styleMap({
+          // Use open color for inactive state to avoid grey slider that looks disabled
+          "--state-cover-inactive-color": openColor,
           "--control-slider-color": color,
           "--control-slider-background": color,
         })}
diff --git a/src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts b/src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts
index 5f6bd2b6a9..c613156cd3 100644
--- a/src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts
+++ b/src/panels/lovelace/tile-features/hui-cover-position-tile-feature.ts
@@ -64,14 +64,16 @@ class HuiCoverPositionTileFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
+    const openColor = stateColorCss(this.stateObj, "open");
 
     const color = this.color
       ? computeCssColor(this.color)
-      : stateColorCss(this.stateObj, forcedState);
+      : stateColorCss(this.stateObj);
 
     const style = {
       "--color": color,
+      // Use open color for inactive state to avoid grey slider that looks disabled
+      "--state-cover-inactive-color": openColor,
     };
 
     return html`
diff --git a/src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts b/src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts
index 638fdbec74..00c5768dd4 100644
--- a/src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts
+++ b/src/panels/lovelace/tile-features/hui-cover-tilt-position-tile-feature.ts
@@ -64,14 +64,16 @@ class HuiCoverTiltPositionTileFeature
 
     const value = Math.max(Math.round(percentage), 0);
 
-    const forcedState = this.stateObj.state === "closed" ? "open" : undefined;
+    const openColor = stateColorCss(this.stateObj, "open");
 
     const color = this.color
       ? computeCssColor(this.color)
-      : stateColorCss(this.stateObj, forcedState);
+      : stateColorCss(this.stateObj);
 
     const style = {
       "--color": color,
+      // Use open color for inactive state to avoid grey slider that looks disabled
+      "--state-cover-inactive-color": openColor,
     };
 
     return html`