Few questions regarding theming

I’m in the process of developing new theme for HA, based on color scheme similar to one used for speedtest.net ( so I called it ookla :slight_smile: ). In the process I found few issues that I was not able to resolve. Some I learned are limitations or ‘bugs’ in how theming works (inconsistent use of color variables in different cards or UI elements, some perhaps being hardcoded or using standard or random palettes). But few are, I think, just the question of finding the right variable to be included in theme. So few questions:

  • What is background color of currently selected item i sidebar (upper highlight on screenshot below)? It seems to be hardcoded to something blueish, as I’ve seen this to be the same across several themes… sidebar-selected-background-color seems to be used to highlight selection when moving it by cursor (bottom selection on screenshot), but once actual selection is made it changes color to this blueish one.
  • What is the color of disabled text in editor UI in bottom left corner (e.g. color for Show Visual Editor, when it is not available)?
    Actual disabled-text-color i found to be used for arrows when changing order of cards and for some (not all!) drop down lists (red accents on screenshots below:

  • Are colors of popups customizable? The one that displays when you hoover mouse cursor over history graph, for example?
  • What is the variable used for link in developer tools?
  • I also found in few places text buttons that seems to have hardcoded text, like the red one on screenshot below. Is it customizable?
  • Finally is background color of main header in editing mode customizable (grey area on screenshot)?

I like the colours in this watching to see how you progress.

So, here is the preview in its current state… Most of work done, but some details remain. There are also some bonuses, like customized Visual Studio Code :slight_smile: If you wanna play, complete code at the end of the post.

  #Color definitions
  dark-background: "#151526" #var(--dark-background)
  medium-background: "#26273b" #var(--medium-background)
  light-background: "#3d3d52" #var(--light-background)
  bright-text: "#ffffff" #var(--bright-text)
  dimmed-text: "#9193ab" #var(--dimmed-text)
  cyan-text: "#1bbfff" #var(--cyan-text)
  alert-text: "#ff0000" #var(--alert-text)
  accent-color: "#ffaa2e" #var(--accent-color)
  cyanish: "#00b8fe" #var(--cyanish)
  greenish: "#7cff73" #var(--greenish)
  dark-magenta: "#7b55d5" #var(--dark-magenta)
  light-magenta: "#fc70f3" #var(--light-magenta)

  app-header-background-color: var(--medium-background)
  app-header-text-color: var(--bright-text)
  # Main Interface Colors
  primary-color: var(--cyan-text)
  light-primary-color: var(--light-background)
  primary-background-color: var(--dark-background)
  secondary-background-color: var(--medium-background)
  divider-color: var(--medium-background)
  material-background-color: var(--medium-background)
  material-secondary-background-color: var(--light-background)

  # Text
  primary-text-color: var(--bright-text)
  secondary-text-color: var(--cyan-text)
  text-primary-color: var(--bright-text)
  disabled-text-color: var(--alert-text)

  # Sidebar Menu
  sidebar-icon-color: var(--dimmed-text)
  sidebar-text-color: var(--bright-text)
  sidebar-background-color: var(--medium-background)
  sidebar-selected-background-color: var(--light-background)
  sidebar-selected-icon-color: var(--cyan-text)
  sidebar-selected-text-color: var(--cyan-text)

  # Cards
  ha-card-border-radius: "8px"
  ha-card-header-font-size: 20px
  ha-card-header-letter-spacing: "1.49px"
  ha-card-box-shadow: 1px 1px 10px 0px rgba(14, 14, 22, 0.32)
  ha-card-header-color: var(--cyan-text)

  # Nav Menu                                                                   
  paper-card-background-color: var(--medium-background)
  paper-listbox-background-color: var(--light-background)
  paper-font-button-text-transform: "uppercase"

  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)

  # States and Badges
  state-icon-color: var(--dimmed-text)
  state-icon-active-color: var(--accent-color)
  state-icon-unavailable-color: var(--dark-background)

  # Sliders
  paper-slider-knob-color: var(--cyan-text)
  paper-slider-knob-start-color: var(--cyan-text)
  paper-slider-pin-color: var(--dark-magenta)
  paper-slider-active-color: var(--greenish)
  paper-slider-container-color: var(--dark-magenta)
  #paper-slider-secondary-color: "#ff0000"

  # Switches
  switch-checked-button-color: var(--cyan-text)
  switch-checked-track-color: var(--dark-background)
  switch-unchecked-button-color: var(--light-background)
  switch-unchecked-track-color: var(--dark-background)