-
Notifications
You must be signed in to change notification settings - Fork 3.4k
[WIP] Supported Theming Variables
Kendell R edited this page Nov 27, 2020
·
15 revisions
Note: this is still a draft You can find some resources here: 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
{
/* 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` */
/* 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);
/* controls */
--toggle-button-color: var(--primary-color);
--toggle-button-unchecked-color: var(--accent-color);
--slider-color: var(--primary-color);
--slider-secondary-color: var(--light-primary-color);
--slider-bar-color: var(--disabled-text-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);
}