WTH cant we customize themes in the UI?

Month of "What the heck?!"
, , ,
1

A nice new Dashboard where you can customize every aspect of Home Assistant.
HA will scan installed custom cards so those are also shown in this dashboard.

Per section those lines as text and behind it a color selector.
The section have collection of separated blocks for every custom card, HA Section, etc

Below an example section part from a theme. Those can be managed then from the Dashboard.

  card-background-color: rgb(255, 255, 255)
  ha-card-border-radius: 6px # 10px
  ha-card-background: rgba(144,146,146, 0.3)
  ha-card-box-shadow: 0px 0px 1px 1px rgba(50,50,50,0.5)
  paper-dialog-background-color: var(--card-background-color)
  paper-card-background-color: var(--card-background-color)

  switch-checked-button-color: rgb(52, 199, 89)
  switch-checked-track-color: rgb(52, 199, 89)
  switch-unchecked-button-color: rgb(174, 174, 178)
  switch-unchecked-track-color: rgb(174, 174, 178)# Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)

  table-row-background-color: rgb(255, 255, 255)
  table-row-alternative-background-color: rgb(242, 242, 247)
  data-table-background-color: var(--primary-background-color)

  material-background-color: rgb(255, 255, 255)
  material-secondary-background-color: rgb(242, 242, 247)
  mdc-theme-surface: var(--primary-background-color)
2

I think two different UI or two différents functions available through graphical UI would be useful:

  • a UI to “manage” themes (create, copy, paste, delete) and manage the associated file structure and inclusion in config.yaml, without having to edit the YAML files.

  • a UI to “define” themes:

    • with all the “variables” or “item” listed for the core frontend: frontend variables
    • if feasible with all the variables from installed custom cards listed too
    • with for each “variable” their description (on hover, or on click on an info icon for example)
    • for each variable, a way to edit them, with for colors a color picker interface (to avoid defining all colors in hexa…)
    • and the best would be to be able to view in live the effect of the changes.
2 Likes
3

This way you can color statistics graphs differently, right? Like, selecting which color has each line?

1 Like
4

If it is feasible by theme yes… Otherwise it should be another WTH.

5

How about just making a Theme Editor, where any and every tag that is in the theme file has a popup on over-hover and then right-click - editable

Also, while doing this, give the ability to change font styles. Changing fonts is a PITA a the moment.

3 Likes
6

Yes, I think this is the essence of it…

2 Likes
7

I’ve been hoping for this for a long time now. I personally customize themes as much as possible on sites that I build, but due to the shallow mounting in HA, it makes it next to impossible to easily adjust styles of anything without needing some kind of HACS integration installed, and it still is very limited. Something even as simple as adding a hover state to the navigation menu is not possible (that I know of, I gave up trying a while ago). Having a more fine tuned way to adjust themes would be great. Not just for the dashboard as well, but a more global way to adjust things (at least for power users, and developers who like to customize things more)

I don’t think it necessarily needs a full on theme editor as I think that would be going down a rabbit hole of complications, scenarios, style conflicts depending on components, integrations, etc. Even creating a UI/UX for it wouldn’t be very appealing.

Being able to do something as simple as adding our own CSS and/or stylesheets is a better route. Not styles in a YAML file, as that’s just messy and not a good way to integrate styles IMO. I think an actual way to add CSS or a stylesheet would be a major improvement IMO. It does mean users would need to understand how styles on a webpage work, but TBH I don’t think the average user needs or will know how to fine tune things. I guess that’s where a very basic theme editor would work.