add fallbacks for state badge color to improve compatibility with themes

nielsfaber · May 16, 2023 · c6d02de · c6d02de
1 parent d04b57e
commit c6d02de
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/src/data/entity.ts b/src/data/entity.ts
@@ -36,11 +36,13 @@ export const codeRequired = (stateObj: HassEntity) => {
 };
 
 export const computeStateColor = (stateObj: HassEntity) => {
-  if(!stateObj || !stateObj.state) return 'var(--state-unavailable-color)';
+  if (!stateObj || !stateObj.state) return 'var(--state-unavailable-color)';
 
   const state = stateObj.state;
-  if(state == AlarmStates.Disarmed) return 'var(--state-inactive-color)';
-  if(Object.values(AlarmStates).includes(state as any)) return `var(--state-alarm_control_panel-${state}-color)`;
+  if (state == AlarmStates.Disarmed)
+    return 'var(--state-alarm_control_panel-disarmed-color, var(--state-alarm_control_panel-inactive-color, var(--state-inactive-color)))';
+  if (Object.values(AlarmStates).includes(state as any))
+    return `var(--state-alarm_control_panel-${state}-color, var(--state-alarm_control_panel-active-color, var(--state-active-color)))`;
 
-  return 'var(--disabled-color)';
-}
+  return 'var(--disabled-color, var(--state-inactive-color))';
+};