Home Home Assistant How to set up themes in Home Assistant

How to set up themes in Home Assistant

-

  • Dark – Red

Dark - Red

Dark - Red:
  ### Main Interface Colors ###
  primary-color: "#EA1111"
  light-primary-color: "#F35858"
  primary-background-color: "#141414"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2D2D2D"
  ### Text ###
  primary-text-color: "#EAEEF1"
  secondary-text-color: "#EA1111"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#666666"
  ### Sidebar Menu ###
  sidebar-icon-color: "#979797"
  sidebar-text-color: "#EAEEF1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#EA1111"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#EA1111"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#EA1111"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#424242"
  label-badge-text-color: "#EAEEF1"
  label-badge-red: "#424242"
  ### Cards ###
  paper-card-background-color: "#1A1A1A"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#EA1111"
  paper-toggle-button-checked-bar-color: "#F36060"
  paper-toggle-button-unchecked-button-color: "#757575"
  paper-toggle-button-unchecked-bar-color: "#424242"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Gray & Green

Gray & Green

Gray & Green:
  ### Main Interface Colors ###
  primary-color: "#24E081"
  light-primary-color: "#6BEAAA"
  primary-background-color: "#494B58"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#595B6B"
  ### Text ###
  primary-text-color: "#FBFBFB"
  secondary-text-color: "#24E081"
  text-primary-color: "#FBFBFB"
  disabled-text-color: "#7A7D90"
  ### Sidebar Menu ###
  sidebar-icon-color: "#A2A4B2"
  sidebar-text-color: "#FBFBFB"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#24E081"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#24E081"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#24E081"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  paper-green-400: "#FBCD41"
  ### Labels ###
  label-badge-background-color: "#9A9CAB"
  label-badge-text-color: "#FBFBFB"
  label-badge-red: "#555766"
  ### Cards ###
  paper-card-background-color: "#555766"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#24E081"
  paper-toggle-button-checked-bar-color: "#6BEAAA"
  paper-toggle-button-unchecked-button-color: "#A2A4B2"
  paper-toggle-button-unchecked-bar-color: "#787B8F"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Gray

Dark - Gray

Dark - Gray:
  ### Main Interface Colors ###
  primary-color: "#A3A3A3"
  light-primary-color: "#C5C5C5"
  primary-background-color: "#272727"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#343434"
  ### Text ###
  primary-text-color: "#FFFFFD"
  secondary-text-color: "#87BF50"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#A3A3A3"
  ### Sidebar Menu ###
  sidebar-icon-color: "#A3A3A3"
  sidebar-text-color: "#FFFFFD"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#87BF50"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#87BF50"
  state-icon-active-color: "#F7AA1C"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#87BF50"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  ### Labels ###
  label-badge-background-color: "#575757"
  label-badge-text-color: "#FFFFFD"
  label-badge-red: "#575757"
  ### Cards ###
  paper-card-background-color: "#2D2D2D"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#87BF50"
  paper-toggle-button-checked-bar-color: "#598330"
  paper-toggle-button-unchecked-button-color: "#A3A3A3"
  paper-toggle-button-unchecked-bar-color: "#6F6F6F"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

WANT TO SUPPORT JUANMTECH?

You can do so now on Patreon and Buy Me A Coffee