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 would be useful:

  • a UI to “manage” themes (create, copy, paste, delete) and manage the associated file structure and inclusion in config.yaml.
  • a UI to “define” a theme, with (at least for core cards and sections), all the main variables listed, their description (on click on an info icon for example), a way to change them and a way to view in live the effect of the changes. Of course, this should include a color picker interface to avoid defining all colors in hexa…
3

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

1 Like