Skip to content

[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);
}
Clone this wiki locally