Fix initial theming (#18296)

This commit is contained in:
Bram Kragten 2023-10-20 20:44:53 +02:00 committed by GitHub
parent 16766f8878
commit ce11301516
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 6 deletions

View File

@ -41,9 +41,7 @@ export const applyThemesOnElement = (
// If there is no explicitly desired dark mode provided, we automatically // If there is no explicitly desired dark mode provided, we automatically
// use the active one from `themes`. // use the active one from `themes`.
const darkMode = const darkMode =
themeSettings && themeSettings?.dark !== undefined themeSettings?.dark !== undefined ? themeSettings.dark : themes.darkMode;
? themeSettings?.dark
: themes.darkMode;
let cacheKey = themeToApply; let cacheKey = themeToApply;
let themeRules: Partial<ThemeVars> = {}; let themeRules: Partial<ThemeVars> = {};
@ -135,10 +133,19 @@ export const applyThemesOnElement = (
// Set and/or reset styles // Set and/or reset styles
if (element.updateStyles) { if (element.updateStyles) {
// Use updateStyles() method of Polymer elements
element.updateStyles(styles); element.updateStyles(styles);
} else if (window.ShadyCSS) { } else if (window.ShadyCSS) {
// Implement updateStyles() method of Polymer elements // Use ShadyCSS if available
window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */ element, styles); window.ShadyCSS.styleSubtree(/** @type {!HTMLElement} */ element, styles);
} else {
for (const s in styles) {
if (s === null) {
element.style.removeProperty(s);
} else {
element.style.setProperty(s, styles[s]);
}
}
} }
}; };

View File

@ -71,7 +71,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
} }
let themeSettings: Partial<HomeAssistant["selectedTheme"]> = let themeSettings: Partial<HomeAssistant["selectedTheme"]> =
this.hass!.selectedTheme; this.hass.selectedTheme;
const themeName = const themeName =
themeSettings?.theme || themeSettings?.theme ||
@ -80,7 +80,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
: this.hass.themes.default_theme); : this.hass.themes.default_theme);
let darkMode = let darkMode =
themeSettings?.dark === undefined ? darkPreferred : themeSettings?.dark; themeSettings?.dark === undefined ? darkPreferred : themeSettings.dark;
const selectedTheme = themeName const selectedTheme = themeName
? this.hass.themes.themes[themeName] ? this.hass.themes.themes[themeName]