/**
 * Apply a theme to an element by setting the CSS variables on it.
 *
 * element: Element to apply theme on.
 * themes: HASS Theme information
 * localTheme: selected theme.
 * updateMeta: boolean if we should update the theme-color meta element.
 */ export const applyThemesOnElement = ( element , themes , localTheme , updateMeta = false ) => { if ( ! element . _themes ) { element . _themes = { } ; } let themeName = themes . default_theme ; if ( localTheme === "default" || ( localTheme && themes . themes [ localTheme ] ) ) { themeName = localTheme ; } const styles = { ... element . _themes } ; if ( themeName !== "default" ) { const theme = themes . themes [ themeName ] ; Object . keys ( theme ) . forEach ( ( key ) => { const prefixedKey = "--" + key ; element . _themes [ prefixedKey ] = "" ; styles [ prefixedKey ] = theme [ key ] ; } ) ; } if ( element . updateStyles ) { element . updateStyles ( styles ) ; } else if ( ( window as any ) . ShadyCSS ) { ( window as any ) . ShadyCSS . styleSubtree ( type { ! HTMLElement } ( element ) , styles ) ; } if ( ! updateMeta ) { return ; } const meta = document . querySelector ( "meta[name=theme-color]" ) ; if ( meta ) { if ( ! meta . hasAttribute ( "default-content" ) ) { meta . setAttribute ( "default-content" , meta . getAttribute ( "content" ) ! ) ; } const themeColor = styles [ "--primary-color" ] || meta . getAttribute ( "default-content" ) ; meta . setAttribute ( "content" , themeColor ) ; } } ;