Fix issues with state_color as false

src/components/entity/state-badge.ts

@@ -32,7 +32,9 @@ export class StateBadge extends LitElement {
 
   @property() public overrideImage?: string;
 
-  @property({ type: Boolean }) public stateColor = false;
+  // Cannot be a boolean attribute because undefined is treated different than
+  // false.  When it is undefined, state is still colored for light entities.
+  @property({ attribute: false }) public stateColor?: boolean;
 
   @property() public color?: string;
 
@@ -70,7 +72,7 @@ export class StateBadge extends LitElement {
     const domain = this.stateObj
       ? computeStateDomain(this.stateObj)
       : undefined;
-    return this.stateColor || (domain === "light" && this.stateColor !== false);
+    return this.stateColor ?? domain === "light";
   }
 
   protected render() {

src/panels/lovelace/cards/hui-button-card.ts

@@ -134,11 +134,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
 
   private getStateColor(stateObj: HassEntity, config: ButtonCardConfig) {
     const domain = stateObj ? computeStateDomain(stateObj) : undefined;
-    return (
-      config &&
-      (config.state_color ||
-        (domain === "light" && config.state_color !== false))
-    );
+    return config && (config.state_color ?? domain === "light");
   }
 
   public getCardSize(): number {

src/panels/lovelace/cards/hui-entities-card.ts

@@ -297,9 +297,9 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
   private renderEntity(entityConf: LovelaceRowConfig): TemplateResult {
     const element = createRowElement(
       (!("type" in entityConf) || entityConf.type === "conditional") &&
-        this._config!.state_color
+        "state_color" in this._config!
         ? ({
-            state_color: true,
+            state_color: this._config.state_color,
             ...(entityConf as EntityConfig),
           } as EntityConfig)
         : entityConf

src/panels/lovelace/cards/hui-entity-card.ts

@@ -75,11 +75,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
 
   private getStateColor(stateObj: HassEntity, config: EntityCardConfig) {
     const domain = stateObj ? computeStateDomain(stateObj) : undefined;
-    return (
-      config &&
-      (config.state_color ||
-        (domain === "light" && config.state_color !== false))
-    );
+    return config && (config.state_color ?? domain === "light");
   }
 
   public setConfig(config: EntityCardConfig): void {

src/panels/lovelace/cards/hui-glance-card.ts

@@ -89,12 +89,12 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
       state_color: true,
       ...config,
     };
-    const entities = processConfigEntities<GlanceConfigEntity>(
-      config.entities
-    ).map((entityConf) => ({
-      hold_action: { action: "more-info" } as MoreInfoActionConfig,
-      ...entityConf,
-    }));
+    const entities = processConfigEntities(config.entities).map(
+      (entityConf) => ({
+        hold_action: { action: "more-info" } as MoreInfoActionConfig,
+        ...entityConf,
+      })
+    );
 
     for (const entity of entities) {
       if (
@@ -237,7 +237,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private renderEntity(entityConf): TemplateResult {
+  private renderEntity(entityConf: GlanceConfigEntity): TemplateResult {
     const stateObj = this.hass!.states[entityConf.entity];
 
     if (!stateObj) {
@@ -294,8 +294,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
                 .stateObj=${stateObj}
                 .overrideIcon=${entityConf.icon}
                 .overrideImage=${entityConf.image}
-                .stateColor=${(entityConf.state_color === false ||
-                  entityConf.state_color) ??
+                .stateColor=${entityConf.state_color ??
                 this._config!.state_color}
               ></state-badge>
             `

src/panels/lovelace/cards/types.ts

@@ -4,16 +4,17 @@ import { LovelaceCardConfig } from "../../../data/lovelace/config/card";
 import { Statistic, StatisticType } from "../../../data/recorder";
 import { ForecastType } from "../../../data/weather";
 import { FullCalendarView, TranslationDict } from "../../../types";
+import { LovelaceCardFeatureConfig } from "../card-features/types";
 import { Condition, LegacyCondition } from "../common/validate-condition";
 import { HuiImage } from "../components/hui-image";
+import { TimestampRenderingFormat } from "../components/types";
 import { LovelaceElementConfig } from "../elements/types";
 import {
   EntityConfig,
   EntityFilterEntityConfig,
   LovelaceRowConfig,
 } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
-import { LovelaceCardFeatureConfig } from "../card-features/types";
 
 export type AlarmPanelCardConfigState =
   | "arm_away"
@@ -245,6 +246,7 @@ export interface GlanceConfigEntity extends ConfigEntity {
   image?: string;
   show_state?: boolean;
   state_color?: boolean;
+  format: TimestampRenderingFormat;
 }
 
 export interface GlanceCardConfig extends LovelaceCardConfig {
@@ -253,7 +255,7 @@ export interface GlanceCardConfig extends LovelaceCardConfig {
   show_icon?: boolean;
   title?: string;
   theme?: string;
-  entities: Array<string | ConfigEntity>;
+  entities: (string | GlanceConfigEntity)[];
   columns?: number;
   state_color?: boolean;
 }