mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 18:56:39 +00:00
Use state color for on and off in more info (#15677)
This commit is contained in:
parent
afe1b7ef59
commit
d113d44d5a
@ -64,7 +64,9 @@ export class HaMoreInfoToggle extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
const color = stateColorCss(this.stateObj);
|
const onColor = stateColorCss(this.stateObj, "on");
|
||||||
|
const offColor = stateColorCss(this.stateObj, "off");
|
||||||
|
|
||||||
const isOn = this.stateObj.state === "on";
|
const isOn = this.stateObj.state === "on";
|
||||||
const isOff = this.stateObj.state === "off";
|
const isOff = this.stateObj.state === "off";
|
||||||
|
|
||||||
@ -82,7 +84,7 @@ export class HaMoreInfoToggle extends LitElement {
|
|||||||
active: isOn,
|
active: isOn,
|
||||||
})}
|
})}
|
||||||
style=${styleMap({
|
style=${styleMap({
|
||||||
"--color": color,
|
"--color": onColor,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<ha-svg-icon .path=${this.iconPathOn || mdiFlash}></ha-svg-icon>
|
<ha-svg-icon .path=${this.iconPathOn || mdiFlash}></ha-svg-icon>
|
||||||
@ -97,7 +99,7 @@ export class HaMoreInfoToggle extends LitElement {
|
|||||||
active: isOff,
|
active: isOff,
|
||||||
})}
|
})}
|
||||||
style=${styleMap({
|
style=${styleMap({
|
||||||
"--color": color,
|
"--color": offColor,
|
||||||
})}
|
})}
|
||||||
>
|
>
|
||||||
<ha-svg-icon .path=${this.iconPathOff || mdiFlashOff}></ha-svg-icon>
|
<ha-svg-icon .path=${this.iconPathOff || mdiFlashOff}></ha-svg-icon>
|
||||||
@ -117,7 +119,8 @@ export class HaMoreInfoToggle extends LitElement {
|
|||||||
@change=${this._valueChanged}
|
@change=${this._valueChanged}
|
||||||
.ariaLabel=${this.hass.localize("ui.dialogs.more_info_control.toggle")}
|
.ariaLabel=${this.hass.localize("ui.dialogs.more_info_control.toggle")}
|
||||||
style=${styleMap({
|
style=${styleMap({
|
||||||
"--control-switch-on-color": color,
|
"--control-switch-on-color": onColor,
|
||||||
|
"--control-switch-off-color": offColor,
|
||||||
})}
|
})}
|
||||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||||
>
|
>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user