From db830e9014ed24985407dcfd90844597d81f4d69 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 8 Mar 2022 19:13:08 +0100 Subject: [PATCH] Fix theme setting (#11977) --- gallery/src/components/demo-cards.ts | 3 +++ hassio/src/hassio-main.ts | 3 ++- src/auth/ha-authorize.ts | 20 +++++++++++++------- src/common/dom/apply_themes_on_element.ts | 9 +++++---- src/fake_data/provide_hass.ts | 4 +++- src/layouts/supervisor-error-screen.ts | 3 ++- src/onboarding/ha-onboarding.ts | 20 +++++++++++++------- src/state/themes-mixin.ts | 23 +++++++++++++++-------- 8 files changed, 56 insertions(+), 29 deletions(-) diff --git a/gallery/src/components/demo-cards.ts b/gallery/src/components/demo-cards.ts index fa91ca2097..d2c485e76e 100644 --- a/gallery/src/components/demo-cards.ts +++ b/gallery/src/components/demo-cards.ts @@ -78,6 +78,9 @@ class DemoCards extends LitElement { ha-formfield { margin-right: 16px; } + #container { + background-color: var(--primary-background-color); + } `; } diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts index b64e505d37..53df932748 100644 --- a/hassio/src/hassio-main.ts +++ b/hassio/src/hassio-main.ts @@ -121,7 +121,8 @@ export class HassioMain extends SupervisorBaseElement { this.parentElement, this.hass.themes, themeName, - themeSettings + themeSettings, + true ); } } diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index 8f91bfe8bf..add29139bc 100644 --- a/src/auth/ha-authorize.ts +++ b/src/auth/ha-authorize.ts @@ -101,13 +101,19 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) { this._fetchAuthProviders(); if (matchMedia("(prefers-color-scheme: dark)").matches) { - applyThemesOnElement(document.documentElement, { - default_theme: "default", - default_dark_theme: null, - themes: {}, - darkMode: true, - theme: "default", - }); + applyThemesOnElement( + document.documentElement, + { + default_theme: "default", + default_dark_theme: null, + themes: {}, + darkMode: true, + theme: "default", + }, + undefined, + undefined, + true + ); } if (!this.redirectUri) { diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts index dd5aebc423..ab80caf54b 100644 --- a/src/common/dom/apply_themes_on_element.ts +++ b/src/common/dom/apply_themes_on_element.ts @@ -31,11 +31,12 @@ export const applyThemesOnElement = ( element, themes: HomeAssistant["themes"], selectedTheme?: string, - themeSettings?: Partial + themeSettings?: Partial, + main?: boolean ) => { - // If there is no explicitly desired theme provided, we automatically + // If there is no explicitly desired theme provided, and the element is the main element we automatically // use the active one from `themes`. - const themeToApply = selectedTheme || themes.theme; + const themeToApply = selectedTheme || (main ? themes.theme : undefined); // If there is no explicitly desired dark mode provided, we automatically // use the active one from `themes`. @@ -47,7 +48,7 @@ export const applyThemesOnElement = ( let cacheKey = themeToApply; let themeRules: Partial = {}; - if (darkMode) { + if (themeToApply && darkMode) { cacheKey = `${cacheKey}__dark`; themeRules = { ...darkStyles }; } diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts index dc9e875b32..3fd29bcdbf 100644 --- a/src/fake_data/provide_hass.ts +++ b/src/fake_data/provide_hass.ts @@ -300,7 +300,9 @@ export const provideHass = ( applyThemesOnElement( document.documentElement, themes, - selectedTheme!.theme + selectedTheme!.theme, + undefined, + true ); }, diff --git a/src/layouts/supervisor-error-screen.ts b/src/layouts/supervisor-error-screen.ts index cc9a9be2ad..eabb00e439 100644 --- a/src/layouts/supervisor-error-screen.ts +++ b/src/layouts/supervisor-error-screen.ts @@ -101,7 +101,8 @@ class SupervisorErrorScreen extends LitElement { this.parentElement, this.hass.themes, themeName, - themeSettings + themeSettings, + true ); } diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts index eb01f05877..3c05e5b680 100644 --- a/src/onboarding/ha-onboarding.ts +++ b/src/onboarding/ha-onboarding.ts @@ -133,13 +133,19 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { import("./particles"); } if (matchMedia("(prefers-color-scheme: dark)").matches) { - applyThemesOnElement(document.documentElement, { - default_theme: "default", - default_dark_theme: null, - themes: {}, - darkMode: true, - theme: "default", - }); + applyThemesOnElement( + document.documentElement, + { + default_theme: "default", + default_dark_theme: null, + themes: {}, + darkMode: true, + theme: "default", + }, + undefined, + undefined, + true + ); } } diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts index 3595a54a59..d56443be0f 100644 --- a/src/state/themes-mixin.ts +++ b/src/state/themes-mixin.ts @@ -38,13 +38,19 @@ export default >(superClass: T) => }); mql.addListener((ev) => this._applyTheme(ev.matches)); if (!this._themeApplied && mql.matches) { - applyThemesOnElement(document.documentElement, { - default_theme: "default", - default_dark_theme: null, - themes: {}, - darkMode: true, - theme: "default", - }); + applyThemesOnElement( + document.documentElement, + { + default_theme: "default", + default_dark_theme: null, + themes: {}, + darkMode: true, + theme: "default", + }, + undefined, + undefined, + true + ); } } @@ -93,7 +99,8 @@ export default >(superClass: T) => document.documentElement, this.hass.themes, themeName, - themeSettings + themeSettings, + true ); if (darkMode !== this.hass.themes.darkMode) {