Theme Styling For More Non-Dashboard Pages and Dialogs

[Nerwyn]

The wiki has a page for using card-mod to change the CSS of anything under hui-root, hui-view (which is already under hui-root), and more-info, which I've been using to great affect in my theme Material Rounded. I've recently started to implement user customizable Material You style colors using these card-mod special theme variables, but have found that I am not able to alter the CSS of all Home Assistant pages using card-mod. Namely, the developer tools, settings, view configuration, add card, and edit card, and sidebar pages and elements.

Being able to apply card-mod styles to the following HTML elements would help fill in the gaps of what we can theme using card-mod:

• Developer Tools: ha-panel-developer-tools
• Settings: ha-panel-config
  • Many tools/settings pages use ha-card for elements, which do get styled.
• View Configuration: hui-dialog-edit-view
• Add Card: hui-dialog-create-card
  • The ha-card previews do get modified, but not the outer dialog.
• Edit Card: hui-dialog-edit-card
• Sidebar: ha-sidebar
  • card-mod-sidebar-yaml is already supported, just wasn't in the wiki.
• Assist: ha-voice-command-dialog

Would it also make sense to allow us to apply styles directly to the home-assistant HTML element and navigate down using shadow roots instead, if possible?

[skynet01]

+1 on this one, I would love to style new headers in the tables right now i cant do it:

skynet_dark_v2:
  card-mod-theme: skynet_dark_v2
  card-mod-view: |
    .group-header {
      font-weight: 800;
      font-size: 18px;
      color: #FFC10A;
    }

[Nerwyn]

It looks like sidebar does have theme variable for the sidebar card-mod-sidebar-yaml, it just wasn't in the wiki but is in this themes README. That solves a major issue I had with my Material You theming. I wonder if the other patchers can be used for further styling.

[skynet01]

I dont think I can target the tables though with the sidebar right?

[Nerwyn]

No, but I listed the sidebar as one of the areas I had trouble styling. I've updated the original list.

[ildar170975]

Note that card-mod-sidebar-yaml is used to mod a sidebar layout of a view, not a "left sidebar with buttons".
Using the card-mod-sidebar-yaml is described in the main huge card-mod thread -> 1st post -> link at the bottom -> themes.