diff --git a/src/common/entity/compute_active_state.ts b/src/common/entity/compute_active_state.ts
new file mode 100644
index 0000000000..db69f04f0e
--- /dev/null
+++ b/src/common/entity/compute_active_state.ts
@@ -0,0 +1,12 @@
+import { HassEntity } from "home-assistant-js-websocket";
+
+export const computeActiveState = (stateObj: HassEntity): string => {
+ const domain = stateObj.entity_id.split(".")[0];
+ let state = stateObj.state;
+
+ if (domain === "climate") {
+ state = stateObj.attributes.hvac_action;
+ }
+
+ return state;
+};
diff --git a/src/common/style/icon_color_css.ts b/src/common/style/icon_color_css.ts
new file mode 100644
index 0000000000..da89247533
--- /dev/null
+++ b/src/common/style/icon_color_css.ts
@@ -0,0 +1,42 @@
+import { css } from "lit-element";
+
+export const iconColorCSS = css`
+ ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"],
+ ha-icon[data-domain="alert"][data-state="on"],
+ ha-icon[data-domain="automation"][data-state="on"],
+ ha-icon[data-domain="binary_sensor"][data-state="on"],
+ ha-icon[data-domain="calendar"][data-state="on"],
+ ha-icon[data-domain="camera"][data-state="streaming"],
+ ha-icon[data-domain="cover"][data-state="open"],
+ ha-icon[data-domain="fan"][data-state="on"],
+ ha-icon[data-domain="light"][data-state="on"],
+ ha-icon[data-domain="input_boolean"][data-state="on"],
+ ha-icon[data-domain="lock"][data-state="unlocked"],
+ ha-icon[data-domain="media_player"][data-state="paused"],
+ ha-icon[data-domain="media_player"][data-state="playing"],
+ ha-icon[data-domain="script"][data-state="running"],
+ ha-icon[data-domain="sun"][data-state="above_horizon"],
+ ha-icon[data-domain="switch"][data-state="on"],
+ ha-icon[data-domain="timer"][data-state="active"],
+ ha-icon[data-domain="vacuum"][data-state="cleaning"] {
+ color: var(--paper-item-icon-active-color, #fdd835);
+ }
+
+ ha-icon[data-domain="climate"][data-state="cooling"] {
+ color: var(--cool-color, #2b9af9);
+ }
+
+ ha-icon[data-domain="climate"][data-state="heating"] {
+ color: var(--heat-color, #ff8100);
+ }
+
+ ha-icon[data-domain="plant"][data-state="problem"],
+ ha-icon[data-domain="zwave"][data-state="dead"] {
+ color: var(--error-state-color, #db4437);
+ }
+
+ /* Color the icon if unavailable */
+ ha-icon[data-state="unavailable"] {
+ color: var(--state-icon-unavailable-color);
+ }
+`;
diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
index f1ca755c4f..516a5ed814 100644
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -16,12 +16,16 @@ import { HassEntity } from "home-assistant-js-websocket";
// tslint:disable-next-line
import { HaIcon } from "../ha-icon";
import { HomeAssistant } from "../../types";
+import { computeActiveState } from "../../common/entity/compute_active_state";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { iconColorCSS } from "../../common/style/icon_color_css";
class StateBadge extends LitElement {
public hass?: HomeAssistant;
@property() public stateObj?: HassEntity;
@property() public overrideIcon?: string;
@property() public overrideImage?: string;
+ @property({ type: Boolean }) public stateColor?: boolean;
@query("ha-icon") private _icon!: HaIcon;
protected render(): TemplateResult | void {
@@ -34,8 +38,10 @@ class StateBadge extends LitElement {
return html`
`;
@@ -111,19 +117,7 @@ class StateBadge extends LitElement {
transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
}
- /* Color the icon if light or sun is on */
- ha-icon[data-domain="light"][data-state="on"],
- ha-icon[data-domain="switch"][data-state="on"],
- ha-icon[data-domain="binary_sensor"][data-state="on"],
- ha-icon[data-domain="fan"][data-state="on"],
- ha-icon[data-domain="sun"][data-state="above_horizon"] {
- color: var(--paper-item-icon-active-color, #fdd835);
- }
-
- /* Color the icon if unavailable */
- ha-icon[data-state="unavailable"] {
- color: var(--state-icon-unavailable-color);
- }
+ ${iconColorCSS}
`;
}
}
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 1b3c2732af..fc08781428 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -197,7 +197,14 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
}
private renderEntity(entityConf: EntitiesCardEntityConfig): TemplateResult {
- const element = createRowElement(entityConf);
+ const element = createRowElement(
+ this._config!.state_color
+ ? {
+ state_color: true,
+ ...entityConf,
+ }
+ : entityConf
+ );
if (this._hass) {
element.hass = this._hass;
}
diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts
index 1860ef3e4a..3a43873a43 100644
--- a/src/panels/lovelace/cards/hui-entity-button-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-button-card.ts
@@ -31,6 +31,8 @@ import { actionHandler } from "../common/directives/action-handler-directive";
import { hasAction } from "../common/has-action";
import { handleAction } from "../common/handle-action";
import { ActionHandlerEvent } from "../../../data/lovelace";
+import { computeActiveState } from "../../../common/entity/compute_active_state";
+import { iconColorCSS } from "../../../common/style/icon_color_css";
@customElement("hui-entity-button-card")
class HuiEntityButtonCard extends LitElement implements LovelaceCard {
@@ -142,16 +144,16 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
${this._config.show_icon
? html`
`
: ""}
@@ -210,17 +212,7 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
color: var(--paper-item-icon-color, #44739e);
}
- ha-icon[data-domain="light"][data-state="on"],
- ha-icon[data-domain="switch"][data-state="on"],
- ha-icon[data-domain="binary_sensor"][data-state="on"],
- ha-icon[data-domain="fan"][data-state="on"],
- ha-icon[data-domain="sun"][data-state="above_horizon"] {
- color: var(--paper-item-icon-active-color, #fdd835);
- }
-
- ha-icon[data-state="unavailable"] {
- color: var(--state-icon-unavailable-color);
- }
+ ${iconColorCSS}
`;
}
diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index 0ce4b2cae9..0f1787f940 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -235,6 +235,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
.stateObj=${stateObj}
.overrideIcon=${entityConf.icon}
.overrideImage=${entityConf.image}
+ stateColor
>
`
: ""}
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 6587468b6d..821f1de56c 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -32,6 +32,7 @@ export interface EntitiesCardEntityConfig extends EntityConfig {
tap_action?: ActionConfig;
hold_action?: ActionConfig;
double_tap_action?: ActionConfig;
+ state_color?: boolean;
}
export interface EntitiesCardConfig extends LovelaceCardConfig {
@@ -43,6 +44,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
icon?: string;
header?: LovelaceHeaderFooterConfig;
footer?: LovelaceHeaderFooterConfig;
+ state_color?: boolean;
}
export interface EntityButtonCardConfig extends LovelaceCardConfig {
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index 5542943a1f..15fbdfde0c 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -68,6 +68,7 @@ class HuiGenericEntityRow extends LitElement {
.stateObj=${stateObj}
.overrideIcon=${this.config.icon}
.overrideImage=${this.config.image}
+ .stateColor=${this.config.state_color}
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this.config!.hold_action),
diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts
index 4ad6e9642a..512276ed67 100644
--- a/src/panels/lovelace/elements/hui-state-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-state-icon-element.ts
@@ -71,6 +71,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
hasAction(this._config.tap_action) ? "0" : undefined
)}
.overrideIcon=${this._config.icon}
+ stateColor
>
`;
}
diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
index d33cd10a2f..462a8e22d5 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
@@ -80,6 +80,9 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
return html`