Currently, card-mod supports three main element accessors in themes: root, view and more-info.
These are fine for theming Lovelace dashboards, as all elements - the sidebar, the tab/tool bar, and the actual contents, can be accessed and traversed.
However, many of the non-dashboard panels (energy, logs, history, map, settings, profile, and of course third party provided panels like HACS, browser-mod, etc.) do not use hui-root in their tree, meaning the custom styling cannot be applied properly.
This is incredibly annoying for themes like LCARS where there's extensive modding of things like the toolbar, to create the overall custom style. Things like the corner elbow styling, which works perfectly for a regular dashboard:
will not properly apply to, say, the media panel:
This is purely due to these panels not using the full hui-root path. In case of a Lovelace dashboard, the main panel will be on the following DOM path:
This is properly reflected in src/patch/hui-root.ts. Non-dashboard panels, however, will have various different paths within home-assistant$home-assistant-main$partial-panel-resolver - for example, the Media panel will use the ha-panel-media-player type within partial-panel-resolver, and have no hui-root within.
To provide a more encompassing theming solution, I'd like to recommend the addition of an extra patch, which would target the
DOM path (or possibly even home-assistant-main), allowing themes to apply styles to these panels.
I'm not sure if there's any technical limitations to this at all - I want to presume there's a reason behind providing the hui-root selector as-is, beyond just "there wasn't need for this".
Currently,
card-modsupports three main element accessors in themes:root,viewandmore-info.These are fine for theming Lovelace dashboards, as all elements - the sidebar, the tab/tool bar, and the actual contents, can be accessed and traversed.
However, many of the non-dashboard panels (energy, logs, history, map, settings, profile, and of course third party provided panels like HACS, browser-mod, etc.) do not use
hui-rootin their tree, meaning the custom styling cannot be applied properly.This is incredibly annoying for themes like LCARS where there's extensive modding of things like the toolbar, to create the overall custom style. Things like the corner elbow styling, which works perfectly for a regular dashboard:
will not properly apply to, say, the media panel:
This is purely due to these panels not using the full
hui-rootpath. In case of a Lovelace dashboard, the main panel will be on the following DOM path:This is properly reflected in src/patch/hui-root.ts. Non-dashboard panels, however, will have various different paths within
home-assistant$home-assistant-main$partial-panel-resolver- for example, the Media panel will use theha-panel-media-playertype withinpartial-panel-resolver, and have nohui-rootwithin.To provide a more encompassing theming solution, I'd like to recommend the addition of an extra patch, which would target the
DOM path (or possibly even
home-assistant-main), allowing themes to apply styles to these panels.I'm not sure if there's any technical limitations to this at all - I want to presume there's a reason behind providing the
hui-rootselector as-is, beyond just "there wasn't need for this".