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)
I also try to keep this list up to date whenever I submit a PR: https://github.com/home-assistant/frontend/wiki/[WIP]-Supported-Theming-Variables
