From 67591a97cf5019523d38f5b24128a557afdbd11a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Pinto?= <jppinto@gmail.com>
Date: Fri, 18 Jul 2025 23:36:02 +0100
Subject: [PATCH] Fix inconsistent climate card colouring when constant
 background color is OFF

Right now, when constant background color is OFF, if climate card is set with dry or fan_only HAVC mode, the background color is still applied to the card as if the setting was ON
---
 src/cards/climate/helpers.js | 52 +++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/cards/climate/helpers.js b/src/cards/climate/helpers.js
index 9c876f67..443018a7 100644
--- a/src/cards/climate/helpers.js
+++ b/src/cards/climate/helpers.js
@@ -10,34 +10,38 @@ export function getClimateColor(context) {
     const stateObj = context._hass.states[context.config.entity];
     const hvacAction = stateObj.attributes.hvac_action;
     const state = stateObj.state;
-    const isHeating = hvacAction === 'heating' || (state === "heat" && context.config.state_color);
-    const isCooling = hvacAction === 'cooling' || (state === "cool" && context.config.state_color);
+    const isHeating = hvacAction === 'heating' || state === "heat";
+    const isCooling = hvacAction === 'cooling' || state === "cool";
     const isOn = state !== "off" && state !== "unknown";
 
-    switch (state) {
-        case "fan_only":
-            overlayColor = 'var(--bubble-state-climate-fan-only-color, var(--state-climate-fan-only-color, var(--state-climate-active-color, var(--state-active-color))))';
-            break;
-        case "dry":
-            overlayColor = 'var(--bubble-state-climate-dry-color, var(--state-climate-dry-color, var(--state-climate-active-color, var(--state-active-color))))';
-            break;
-        default:
-            if (isCooling) {
-                overlayColor = 'var(--bubble-state-climate-cool-color, var(--state-climate-cool-color, var(--state-climate-active-color, var(--state-active-color))))';
-            } else if (isHeating) {
-                overlayColor = 'var(--bubble-state-climate-heat-color, var(--state-climate-heat-color, var(--state-climate-active-color, var(--state-active-color))))';
-            } else if (isOn && context.config.state_color) {
-                if (state === 'auto') {
-                    overlayColor = 'var(--bubble-state-climate-auto-color, var(--state-climate-auto-color, var(--state-climate-active-color, var(--state-active-color))))';
-                } else if (state === "heat_cool") {
-                    overlayColor = 'var(--bubble-state-climate-heat-cool-color, var(--state-climate-heat-cool-color, var(--state-climate-active-color, var(--state-active-color))))';
+    if (context.config.state_color) {
+        switch (state) {
+            case "fan_only":
+                overlayColor = 'var(--bubble-state-climate-fan-only-color, var(--state-climate-fan-only-color, var(--state-climate-active-color, var(--state-active-color))))';
+                break;
+            case "dry":
+                overlayColor = 'var(--bubble-state-climate-dry-color, var(--state-climate-dry-color, var(--state-climate-active-color, var(--state-active-color))))';
+                break;
+            default:
+                if (isCooling) {
+                    overlayColor = 'var(--bubble-state-climate-cool-color, var(--state-climate-cool-color, var(--state-climate-active-color, var(--state-active-color))))';
+                } else if (isHeating) {
+                    overlayColor = 'var(--bubble-state-climate-heat-color, var(--state-climate-heat-color, var(--state-climate-active-color, var(--state-active-color))))';
+                } else if (isOn) {
+                    if (state === 'auto') {
+                        overlayColor = 'var(--bubble-state-climate-auto-color, var(--state-climate-auto-color, var(--state-climate-active-color, var(--state-active-color))))';
+                    } else if (state === "heat_cool") {
+                        overlayColor = 'var(--bubble-state-climate-heat-cool-color, var(--state-climate-heat-cool-color, var(--state-climate-active-color, var(--state-active-color))))';
+                    } else {
+                        overlayColor = 'var(--bubble-climate-accent-color, var(--bubble-accent-color, var(--accent-color)))';
+                    }
                 } else {
-                    overlayColor = 'var(--bubble-climate-accent-color, var(--bubble-accent-color, var(--accent-color)))';
+                    overlayColor = '';
                 }
-            } else {
-                overlayColor = '';
-            }
-            break;
+                break;
+        }
+    } else {
+        overlayColor = '';
     }
 
     return overlayColor;