The most used variables in Home Assistant's source code

I decided to clone home-assistant/frontend and write a python script to go through all of the .ts files, looking for var(--s. Here’s the ones that occurred the most often.

['--warning-color', 3]
['--alarm-color-pending', 3]
['--ha-label-badge-size', 3]
['--sidebar-selected-icon-color', 3]
['--switch-checked-color', 3]
['--media-browse-item-size', 3]
['--rgb-card-background-color', 3]
['--paper-font-subhead_-_font-family', 3]
['--paper-font-subhead_-_font-weight', 3]
['--paper-font-subhead_-_line-height', 3]
['--state-icon-color', 3]
['--name-font-size', 3]
['--lovelace-background', 3]
['--ha-card-header-font-family', 4]
['--ha-card-header-font-size', 4]
['--app-header-border-bottom', 4]
['--text-light-primary-color', 4]
['--dark-divider-opacity', 4]
['--mdc-icon-size', 4]
['--paper-blue-400', 4]
['--alarm-state-color', 4]
['--mode-color', 4]
['--slider-color', 4]
['--label-badge-blue', 5]
['--paper-font-headline_-_letter-spacing', 5]
['--sidebar-icon-color', 5]
['--ha-card-header-color', 6]
['--label-badge-green', 6]
['--label-badge-yellow', 6]
['--paper-font-headline_-_font-family', 6]
['--paper-font-headline_-_font-size', 6]
['--paper-font-headline_-_font-weight', 6]
['--paper-font-headline_-_line-height', 6]
['--success-color', 6]
['--ha-card-border-radius', 6]
['--light-primary-color', 7]
['--rgb-primary-color', 7]
['--dark-primary-opacity', 8]
['--code-font-family', 9]
['--label-badge-red', 9]
['--mdc-dialog-scroll-divider-color', 9]
['--mdc-theme-surface', 10]
['--rgb-primary-text-color', 10]
['--sidebar-text-color', 11]
['--app-header-text-color', 11]
['--sidebar-background-color', 12]
['--app-header-background-color', 13]
['--secondary-background-color', 14]
['--paper-item-icon-color', 14]
['--text-primary-color', 19]
['--card-background-color', 19]
['--primary-background-color', 21]
['--disabled-text-color', 28]
['--accent-color', 29]
['--divider-color', 68]
['--error-color', 68]
['--secondary-text-color', 98]
['--primary-text-color', 107]
['--primary-color', 129]
Full list
['--google-red-300', 1]
['--ha-bar-background-color', 1]
['--ha-bar-primary-color', 1]
['--button-toggle-size', 1]
['--button-toggle-icon-size', 1]
['--mdc-icon-button-ripple-opacity', 1]
['--ha-card-border-width', 1]
['--code-mirror-height', 1]
['--code-mirror-direction', 1]
['--code-mirror-max-height', 1]
['--paper-input-container-focus-color', 1]
['--paper-dialog-color', 1]
['--paper-input-container-color', 1]
['--paper-dialog-background-color', 1]
['--code-editor-background-color', 1]
['--codemirror-keyword', 1]
['--codemirror-operator', 1]
['--codemirror-variable-2', 1]
['--codemirror-builtin', 1]
['--codemirror-atom', 1]
['--codemirror-number', 1]
['--codemirror-def', 1]
['--codemirror-string', 1]
['--codemirror-string-2', 1]
['--codemirror-comment', 1]
['--codemirror-variable', 1]
['--codemirror-tag', 1]
['--codemirror-meta', 1]
['--codemirror-attribute', 1]
['--codemirror-property', 1]
['--codemirror-qualifier', 1]
['--codemirror-variable-3', 1]
['--codemirror-type', 1]
['--paper-font-common-base_-_font-family', 1]
['--dialog-z-index', 1]
['--justify-action-buttons', 1]
['--vertial-align-dialog', 1]
['--dialog-content-position', 1]
['--dialog-surface-position', 1]
['--dialog-surface-top', 1]
['--mdc-dialog-min-height', 1]
['--layout-fit_-_position', 1]
['--layout-fit_-_top', 1]
['--layout-fit_-_right', 1]
['--layout-fit_-_bottom', 1]
['--layout-fit_-_left', 1]
['--gauge-color', 1]
['--ha-help-tooltip-size', 1]
['--ha-help-tooltip-color', 1]
['--ha-label-badge-padding', 1]
['--ha-label-badge-font-size', 1]
['--label-badge-text-color', 1]
['--label-badge-background-color', 1]
['--ha-label-badge-label-color', 1]
['--ha-label-badge-label-text-transform', 1]
['--ha-label-badge-title-font-size', 1]
['--ha-label-badge-title-width', 1]
['--ha-label-badge-title-font-weight', 1]
['--markdown-code-background-color', 1]
['--markdown-svg-background-color', 1]
['--markdown-svg-color', 1]
['--paper-font-headline-_font-weight', 1]
['--paper-font-title_-_letter-spacing', 1]
['--sidebar-selected-text-color', 1]
['--text-accent-color', 1]
['--ha-icon-display', 1]
['--data-table-background-color', 1]
['--data-table-border-width', 1]
['--ha-icon-button-inactive-color', 1]
['--ha-icon-button-active-color', 1]
['--label-badge-grey', 1]
['--media-browser-max-height', 1]
['--weather-icon-rain-color', 1]
['--weather-icon-sun-color', 1]
['--weather-icon-moon-color', 1]
['--weather-icon-cloud-back-color', 1]
['--weather-icon-cloud-front-color', 1]
['--mdc-typography-headline6-letter-spacing', 1]
['--mdc-typography-headline6-text-decoration', 1]
['--mdc-typography-headline6-text-transform', 1]
['--material-font-family', 1]
['--fc-theme-standard-border-color', 1]
['--dark-background-color', 1]
['--dark-text-color', 1]
['--dark-color', 1]
['--text-dark-color', 1]
['--color-on-error', 1]
['--glance-column-width', 1]
['--brightness-font-size', 1]
['--dark-secondary-opacity', 1]
['--auto-color', 1]
['--manual-color', 1]
['--off-color', 1]
['--fan_only-color', 1]
['--eco-color', 1]
['--idle-color', 1]
['--unknown-color', 1]
['--state-icon-active-color', 1]
['--slider-secondary-color', 1]
['--slider-bar-color', 1]
['--paper-font-body1_-_font-family', 1]
['--paper-font-body1_-_-webkit-font-smoothing', 1]
['--paper-font-body1_-_font-size', 1]
['--paper-font-body1_-_font-weight', 1]
['--paper-font-headline_-_white-space', 1]
['--paper-font-headline_-_overflow', 1]
['--paper-font-headline_-_text-overflow', 1]
['--paper-font-title_-_-webkit-font-smoothing', 1]
['--paper-font-title_-_white-space', 1]
['--paper-font-title_-_overflow', 1]
['--paper-font-title_-_text-overflow', 1]
['--paper-font-title_-_font-weight', 1]
['--paper-font-subhead_-_-webkit-font-smoothing', 1]
['--paper-font-subhead_-_white-space', 1]
['--paper-font-subhead_-_overflow', 1]
['--paper-font-subhead_-_text-overflow', 1]
['--paper-green-400', 2]
['--paper-orange-400', 2]
['--paper-font-subhead_-_font-size', 2]
['--paper-font-headline_-_-webkit-font-smoothing', 2]
['--paper-item-icon-active-color', 2]
['--cool-color', 2]
['--heat-color', 2]
['--dry-color', 2]
['--alarm-color-armed', 2]
['--alarm-color-disarmed', 2]
['--alarm-color-triggered', 2]
['--error-state-color', 2]
['--state-icon-unavailable-color', 2]
['--ha-bar-border-radius', 2]
['--dialog-content-padding', 2]
['--mdc-theme-on-primary', 2]
['--ha-label-badge-color', 2]
['--paper-font-title_-_font-family', 2]
['--paper-font-title_-_font-size', 2]
['--paper-font-title_-_line-height', 2]
['--switch-checked-button-color', 2]
['--switch-checked-track-color', 2]
['--switch-unchecked-button-color', 2]
['--switch-unchecked-track-color', 2]
['--paper-grey-500', 2]
['--mdc-typography-font-family', 2]
['--mdc-typography-headline6-font-size', 2]
['--mdc-typography-headline6-line-height', 2]
['--mdc-typography-headline6-font-weight', 2]
['--light-theme-disabled-color', 2]
['--paper-font-display1_-_font-family', 2]
['--paper-font-display1_-_font-size', 2]
['--paper-font-display1_-_font-weight', 2]
['--paper-font-display1_-_letter-spacing', 2]
['--paper-font-display1_-_line-height', 2]
['--paper-font-body1_-_line-height', 2]
['--paper-progress-height', 2]
['--entities-divider-color', 2]
['--switch-unchecked-color', 2]
['--scrollbar-thumb-color', 2]
['--warning-color', 3]
['--alarm-color-pending', 3]
['--ha-label-badge-size', 3]
['--sidebar-selected-icon-color', 3]
['--switch-checked-color', 3]
['--media-browse-item-size', 3]
['--rgb-card-background-color', 3]
['--paper-font-subhead_-_font-family', 3]
['--paper-font-subhead_-_font-weight', 3]
['--paper-font-subhead_-_line-height', 3]
['--state-icon-color', 3]
['--name-font-size', 3]
['--lovelace-background', 3]
['--ha-card-header-font-family', 4]
['--ha-card-header-font-size', 4]
['--app-header-border-bottom', 4]
['--text-light-primary-color', 4]
['--dark-divider-opacity', 4]
['--mdc-icon-size', 4]
['--paper-blue-400', 4]
['--alarm-state-color', 4]
['--mode-color', 4]
['--slider-color', 4]
['--label-badge-blue', 5]
['--paper-font-headline_-_letter-spacing', 5]
['--sidebar-icon-color', 5]
['--ha-card-header-color', 6]
['--label-badge-green', 6]
['--label-badge-yellow', 6]
['--paper-font-headline_-_font-family', 6]
['--paper-font-headline_-_font-size', 6]
['--paper-font-headline_-_font-weight', 6]
['--paper-font-headline_-_line-height', 6]
['--success-color', 6]
['--ha-card-border-radius', 6]
['--light-primary-color', 7]
['--rgb-primary-color', 7]
['--dark-primary-opacity', 8]
['--code-font-family', 9]
['--label-badge-red', 9]
['--mdc-dialog-scroll-divider-color', 9]
['--mdc-theme-surface', 10]
['--rgb-primary-text-color', 10]
['--sidebar-text-color', 11]
['--app-header-text-color', 11]
['--sidebar-background-color', 12]
['--app-header-background-color', 13]
['--secondary-background-color', 14]
['--paper-item-icon-color', 14]
['--text-primary-color', 19]
['--card-background-color', 19]
['--primary-background-color', 21]
['--disabled-text-color', 28]
['--accent-color', 29]
['--divider-color', 68]
['--error-color', 68]
['--secondary-text-color', 98]
['--primary-text-color', 107]
['--primary-color', 129]

Make sure you use these in your theme to make sure it applies everywhere.
Disclaimer: These probably aren’t accurate about where they come up. For example, if a file uses a variable only once but you see it a lot across HA, this won’t be as accurate. No validation of any stuff was done.
Source code:

import re
var_matcher = "var\((--[a-zA-Z-_][a-zA-Z0-9-_]*)[,\)]"
vars_found = []
def get_count(item):
    return item[1]
import glob
for filename in glob.glob("GitHub/frontend/**/*.ts", recursive=True):
    file_contents = open(filename, encoding="utf-8").read()
    try:
        file_contents = file_contents.decode()
    except Exception:
        pass
    for var in re.findall(var_matcher, file_contents):
        vars_found_only = [item[0] for item in vars_found]
        if var not in vars_found_only:
            vars_found.append([var, 1])
        else:
            vars_found[vars_found_only.index(var)][1] += 1
for var in sorted(vars_found, key=get_count):
    print(var)
6 Likes

Interesting. I am going to have to figure out what some of these do and add them to my ‘default theme’

Thanks for pulling the data.

Looks great! But who sorts a list off the second column!?!?!?!

The second column is how many times they appeared in the source. :man_shrugging:

Yeah I know, I’m just giving you crap :wink:

1 Like

nice!
now how can we get the to the frontend in a lovelace card. Ive been trying to do so unsuccessfully, to see which vars have which effect, by writing the markdown like this:

type: custom:hui-element
card_type: markdown

content: >
  ### Color test sheet for theme:

  ## {{states('input_select.theme')|capitalize}}

  - <font color = var(--background-color-on)> background-color-on</font>

  - <font color = var(--background-color-off)>background-color-off</font>

  - <font color = var(--text-color-on)>text-color-on</font>

  - <font color = var(--text-color-off)>text-color-off</font>

  - <font color = var(--icon-color-on)>icon-color-on</font>

  - <font color = var(--icon-color-off)>icon-color-off</font>

  - <font color = var(--active-color)>active-color</font>

  - <font color = var(--paper-item-icon-active-color)> paper-item-icon-active-color</font>

what I am trying to do is have a card ike this show all relevant colors for a current theme by name, in their respective color.

seems the markdown doesnt support the colors the way I’ve done it here. Cant this be done? Or should I use a different technique/code.

It looks like it works, and the clear theme hasn’t bothered to change any of those variables.

you can use this for a list

type: custom:hui-element
card_type: markdown
content: >
  ### Color test sheet for theme:

  ## {{states('input_select.theme')|capitalize}}
  {%- set vars = ['--accent-color', '--alarm-color-armed', '--alarm-color-disarmed', '--alarm-color-pending', '--alarm-color-triggered', '--alarm-state-color', '--app-header-background-color', '--app-header-border-bottom', '--app-header-text-color', '--auto-color', '--brightness-font-size', '--button-toggle-icon-size', '--button-toggle-size', '--card-background-color', '--code-editor-background-color', '--code-font-family', '--code-mirror-direction', '--code-mirror-height', '--code-mirror-max-height', '--codemirror-atom', '--codemirror-attribute', '--codemirror-builtin', '--codemirror-comment', '--codemirror-def', '--codemirror-keyword', '--codemirror-meta', '--codemirror-number', '--codemirror-operator', '--codemirror-property', '--codemirror-qualifier', '--codemirror-string', '--codemirror-string-2', '--codemirror-tag', '--codemirror-type', '--codemirror-variable', '--codemirror-variable-2', '--codemirror-variable-3', '--color-on-error', '--cool-color', '--dark-background-color', '--dark-color', '--dark-divider-opacity', '--dark-primary-opacity', '--dark-secondary-opacity', '--dark-text-color', '--data-table-background-color', '--data-table-border-width', '--dialog-content-padding', '--dialog-content-position', '--dialog-surface-position', '--dialog-surface-top', '--dialog-z-index', '--disabled-text-color', '--divider-color', '--dry-color', '--eco-color', '--entities-divider-color', '--error-color', '--error-state-color', '--fan_only-color', '--fc-theme-standard-border-color', '--gauge-color', '--glance-column-width', '--google-red-300', '--ha-bar-background-color', '--ha-bar-border-radius', '--ha-bar-primary-color', '--ha-card-border-radius', '--ha-card-header-color', '--ha-card-header-font-family', '--ha-card-header-font-size', '--ha-icon-button-active-color', '--ha-icon-button-inactive-color', '--ha-icon-display', '--ha-label-badge-color', '--ha-label-badge-font-size', '--ha-label-badge-label-color', '--ha-label-badge-label-text-transform', '--ha-label-badge-padding', '--ha-label-badge-size', '--ha-label-badge-title-font-size', '--ha-label-badge-title-font-weight', '--ha-label-badge-title-width', '--heat-color', '--idle-color', '--justify-action-buttons', '--label-badge-background-color', '--label-badge-blue', '--label-badge-green', '--label-badge-grey', '--label-badge-red', '--label-badge-text-color', '--label-badge-yellow', '--layout-fit_-_bottom', '--layout-fit_-_left', '--layout-fit_-_position', '--layout-fit_-_right', '--layout-fit_-_top', '--light-primary-color', '--light-theme-disabled-color', '--lovelace-background', '--manual-color', '--markdown-code-background-color', '--markdown-svg-background-color', '--markdown-svg-color', '--material-font-family', '--mdc-dialog-min-height', '--mdc-dialog-scroll-divider-color', '--mdc-icon-button-ripple-opacity', '--mdc-icon-size', '--mdc-theme-on-primary', '--mdc-theme-surface', '--mdc-typography-font-family', '--mdc-typography-headline6-font-size', '--mdc-typography-headline6-font-weight', '--mdc-typography-headline6-letter-spacing', '--mdc-typography-headline6-line-height', '--mdc-typography-headline6-text-decoration', '--mdc-typography-headline6-text-transform', '--media-browse-item-size', '--mode-color', '--name-font-size', '--off-color', '--paper-blue-400', '--paper-dialog-background-color', '--paper-dialog-color', '--paper-font-body1_-_-webkit-font-smoothing', '--paper-font-body1_-_font-family', '--paper-font-body1_-_font-size', '--paper-font-body1_-_font-weight', '--paper-font-body1_-_line-height', '--paper-font-common-base_-_font-family', '--paper-font-display1_-_font-family', '--paper-font-display1_-_font-size', '--paper-font-display1_-_font-weight', '--paper-font-display1_-_letter-spacing', '--paper-font-display1_-_line-height', '--paper-font-headline-_font-weight', '--paper-font-headline_-_-webkit-font-smoothing', '--paper-font-headline_-_font-family', '--paper-font-headline_-_font-size', '--paper-font-headline_-_font-weight', '--paper-font-headline_-_letter-spacing', '--paper-font-headline_-_line-height', '--paper-font-headline_-_overflow', '--paper-font-headline_-_text-overflow', '--paper-font-headline_-_white-space', '--paper-font-subhead_-_-webkit-font-smoothing', '--paper-font-subhead_-_font-family', '--paper-font-subhead_-_font-size', '--paper-font-subhead_-_font-weight', '--paper-font-subhead_-_line-height', '--paper-font-subhead_-_overflow', '--paper-font-subhead_-_text-overflow', '--paper-font-subhead_-_white-space', '--paper-font-title_-_-webkit-font-smoothing', '--paper-font-title_-_font-family', '--paper-font-title_-_font-size', '--paper-font-title_-_font-weight', '--paper-font-title_-_letter-spacing', '--paper-font-title_-_line-height', '--paper-font-title_-_overflow', '--paper-font-title_-_text-overflow', '--paper-font-title_-_white-space', '--paper-green-400', '--paper-grey-500', '--paper-input-container-color', '--paper-input-container-focus-color', '--paper-item-icon-active-color', '--paper-item-icon-color', '--paper-orange-400', '--paper-progress-height', '--primary-background-color', '--primary-color', '--primary-text-color', '--rgb-card-background-color', '--rgb-primary-color', '--rgb-primary-text-color', '--scrollbar-thumb-color', '--secondary-background-color', '--secondary-text-color', '--sidebar-background-color', '--sidebar-icon-color', '--sidebar-selected-icon-color', '--sidebar-selected-text-color', '--sidebar-text-color', '--slider-bar-color', '--slider-color', '--slider-secondary-color', '--state-icon-active-color', '--state-icon-color', '--state-icon-unavailable-color', '--success-color', '--switch-checked-button-color', '--switch-checked-color', '--switch-checked-track-color', '--switch-unchecked-button-color', '--switch-unchecked-color', '--switch-unchecked-track-color', '--text-accent-color', '--text-dark-color', '--text-light-primary-color', '--text-primary-color', '--unknown-color', '--vertial-align-dialog', '--warning-color', '--weather-icon-cloud-back-color', '--weather-icon-cloud-front-color', '--weather-icon-moon-color', '--weather-icon-rain-color', '--weather-icon-sun-color'] %}
  {%- for var in vars %}
  - <font color = var({{ var }})>{{ var[2:] }}</font>

  {%- endfor %}

Perhaps I’m doing something wrong…I have a dual-mode generic thermostat set up, with heat, cool and fan. Under the standard theme, the off and fan_only colors are the same, which is to say that the icon doesn’t change if in fan_only mode or not.

I’ve tried changing my installed themes using the fan-only-color key identified above, but it doesn’t change the icon color. The heat and cool icons also don’t seem to be able to be changed (I tried to change them as a test).

I notice that hui-thermostat-card.ts has both the icons and colors hard-coded in it. Does hard coding in the card override theming? If so then I’m wasting my time with themes.

If themes won’t work, and I update the hui-thermostat-card.ts with colors of my choosing, can I put it in the custom_components directory? If so, what would the directory structure be? I’ve tried:

custom_components/cards/
custom_components/lovelace/cards/

…and neither work. I’m not actually sure if you can do that with components from the front end or not.

I know I could make it into a custom card, but that’s more effort than I want to expend to change the color of an icon…

Thanks

You might be able to use shadow-root styling with card-mod. The other way to making a custom card is to do this:

The card-mod route might work…thanks for pointing that out.