0
[WIP] Supported Theming Variables
Marc Randolph edited this page 2021-03-12 06:51:27 -06:00
Note: this is still a draft
You can find the main source for variables and defaults here:
And other resources here:
- ALL Lovelace changes (theme related or not): https://github.com/home-assistant/frontend/releases
- Older changes (outdated, but search for "theming"): https://www.home-assistant.io/lovelace/changelog/
- https://github.com/SilvrrGIT/Home-Assistant-Themes/blob/master/themes/default_ha.yaml
- https://community.home-assistant.io/t/the-most-used-variables-in-home-assistants-source-code/226727
Note that many theme variables will inherit "correct" values from other variables. Here's an example of something approaching a minimum list of variables required for a basic theme:
darkorange: # by Bram and SeanPM5
primary-color: "#ff9800"
light-primary-color: "#ffc947"
dark-primary-color: "#c66900"
text-primary-color: "#ffffff"
primary-text-color: "#ffffff"
secondary-text-color: "#ff9800"
primary-background-color: "#37464f"
card-background-color: "#263137"
secondary-background-color: "#263137"
(incomplete) list of variables:
{
/* text */
--primary-text-color: #212121;
--secondary-text-color: #727272;
--text-primary-color: #ffffff;
--disabled-text-color: #bdbdbd;
/* main interface colors */
--primary-color: #03a9f4;
--dark-primary-color: #0288d1;
--light-primary-color: #b3e5fC;
--accent-color: #ff9800;
--divider-color: rgba(0, 0, 0, .12);
/* states and badges */
--state-icon-color: #44739e;
--state-icon-active-color: #FDD835;
--state-icon-unavailable-color: var(--disabled-text-color);
/* background and sidebar */
--card-background-color: #ffffff;
--primary-background-color: #fafafa;
--secondary-background-color: #e5e5e5; /* the background of the main `dashboard` */
--code-editor-background-color: var(--card-background-color);
/* sidebar menu */
--sidebar-text-color: var(--primary-text-color);
--sidebar-background-color: var(--paper-listbox-background-color);
--sidebar-icon-color: rgba(0, 0, 0, 0.5);
--sidebar-selected-text-color: var(--primary-text-color);
--sidebar-selected-background-color: rgba(30,30,30,0.1);
--sidebar-selected-icon-color: var(--primary-color);
--scrollbar-thumb-color: >>>TBD<<< ; /* tab for scrolling when sidebar has lots of entries */
/* controls */
--toggle-button-unchecked-color: var(--accent-color);
--toggle-button-color: var(--primary-color);
--slider-bar-color: var(--disabled-text-color);
--slider-color: var(--primary-color);
--slider-secondary-color: var(--light-primary-color);
--paper-progress-height: 4px;
--paper-progress-container-color: rgba(200, 200, 200, 0.5);
--paper-progress-active-color
/* badges */
--ha-label-badge-title-font-size: .9em;
--ha-label-badge-title-width: 5em;
--ha-label-badge-title-font-weight: 300;
--label-badge-background-color: white;
--label-badge-text-color: rgb(76, 76, 76);
--label-badge-red: #DF4C1E;
--label-badge-blue: #039be5;
--label-badge-green: #0DA035;
--label-badge-yellow: #f4b400;
--label-badge-grey: var(--paper-grey-500);
/* header */
--app-header-text-color: var(--text-primary-color);
--app-header-edit-text-color: black;
--app-header-background-color: var(--primary-color);
--app-header-edit-background-color: #CCC;
/* "Reload theme" message (aka toast) at bottom of page */
/* Note: In the past, "paper-" variables have been replaced with non-paper, so these might change in the future */
--paper-toast-color: #f1f1f1;
--paper-toast-background-color: #323232;
/* Card layout */
--masonry-view-card-margin: 4px 4px 8px;
--grid-card-gap: 8px; /* Gap just means margin */
--stack-card-margin: 10px; /* Default if you haven't set them individually */
--horizontal-stack-card-margin: 0 4px;
--vertical-stack-card-margin: 4px 0;
/* Card display */
--ha-card-border-radius: 2px;
--ha-card-border-color: var(--primary-color);
--ha-card-border-width: 2px;
--section-header-text-color: var(--primary-text-color); /* If a card has sub-sections, this is the header color for those */
/* Picture card specific (in addition to card variables above */
--ha-picture-card-background-color: rgba(0, 0, 0, 0.3); /* Defaults to semi-transparent background behind text */
--ha-picture-card-text-color: white;
--ha-picture-icon-button-on-color: white;
--ha-picture-icon-button-color: #a9a9a9;
/* Template and YAML code editors */
--code-editor-background-color: var(--card-background-color);
--codemirror-atom: #F78C6C;
--codemirror-attribute: #C792EA;
--codemirror-comment: #545454;
--codemirror-keyword: #C792EA;
--codemirror-meta: #FFCB6B; /* or --primary-text-color? */
--codemirror-number: #FF5370;
--codemirror-operator: #89DDFF;
--codemirror-property: #C792EA;
--codemirror-qualifier: #DECB6B;
--codemirror-string: #C3E88D;
/* (possibly) less common code editor variables: */
--codemirror-builtin: #FFCB6B;
--codemirror-def: #82AAFF;
--codemirror-string-2: #f07178;
--codemirror-tag: #FF5370;
--codemirror-type: #DECB6B;
--codemirror-variable: #f07178;
--codemirror-variable-2: #EEFFFF;
--codemirror-variable-3: #DECB6B;
}