jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-23 17:26:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make sure lovelace theme background is set on it's container (#20683)

Browse Source
This commit is contained in:
Bram Kragten 2024-05-01 11:24:40 +02:00 committed by GitHub
parent 627e06663b
commit f611f23f6f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/panels/lovelace/hui-root.ts
View File

@ -886,9 +886,9 @@ class HUIRoot extends LitElement {
const configBackground = viewConfig.background || this.config.background;
if (configBackground) {
this.style.setProperty("--lovelace-background", configBackground);
root.style.setProperty("--lovelace-background", configBackground);
} else {
this.style.removeProperty("--lovelace-background");
root.style.removeProperty("--lovelace-background");
}
root.appendChild(view);

29
src/panels/lovelace/views/hui-view.ts
View File

@ -143,6 +143,11 @@ export class HUIView extends ReactiveElement {
return this;
}
public connectedCallback(): void {
super.connectedCallback();
this._applyTheme();
}
public willUpdate(changedProperties: PropertyValues): void {
super.willUpdate(changedProperties);
@ -212,7 +217,7 @@ export class HUIView extends ReactiveElement {
this.hass.themes !== oldHass.themes ||
this.hass.selectedTheme !== oldHass.selectedTheme
) {
applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
this._applyTheme();
}
}
if (changedProperties.has("narrow")) {
@ -238,6 +243,28 @@ export class HUIView extends ReactiveElement {
}
}
private _applyTheme() {
applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
if (this._viewConfigTheme) {
// Set lovelace background color to root element, so it will be placed under the header too
const computedStyles = getComputedStyle(this);
let lovelaceBackground = computedStyles.getPropertyValue(
"--lovelace-background"
);
if (!lovelaceBackground) {
lovelaceBackground = computedStyles.getPropertyValue(
"--primary-background-color"
);
}
if (lovelaceBackground) {
this.parentElement?.style.setProperty(
"--lovelace-background",
lovelaceBackground
);
}
}
}
private async _initializeConfig() {
let viewConfig = this.lovelace.config.views[this.index];
let isStrategy = false;