Home Home Assistant How to set up themes in Home Assistant

How to set up themes in Home Assistant

-

  • Dark – Orange

Dark - Orange

Dark - Orange:
  ### Main Interface Colors ###
  primary-color: "#FF8300"
  light-primary-color: "#FFA23F"
  primary-background-color: "#1F1F28"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#353544"
  ### Text ###
  primary-text-color: "#FFFFFF"
  secondary-text-color: "#FF8300"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#595975"
  ### Sidebar Menu ###
  sidebar-icon-color: "#7D8BA6"
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFA23F"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FF8300"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FF8300"
  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: "#363647"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: "#FFA23F"
  ### Cards ###
  paper-card-background-color: "#23232E"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF8300"
  paper-toggle-button-checked-bar-color: "#FFA23F"
  paper-toggle-button-unchecked-button-color: "#767679"
  paper-toggle-button-unchecked-bar-color: "#444446"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Orange

Light - Orange

Light - Orange:
  ### Main Interface Colors ###
  primary-color: "#FF8300"
  light-primary-color: "#FFA23F"
  primary-background-color: "#F4F5F8"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#C1C5D5"
  ### Text ###
  primary-text-color: "#4B4B4D"
  secondary-text-color: "#FF8300"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#A6A6BB"
  ### Sidebar Menu ###
  sidebar-icon-color: "#7D8BA6"
  sidebar-text-color: "#4B4B4D"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFA23F"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FF8300"
  state-icon-active-color: "#FBCD41"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FF8300"
  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: "#FFFFFF"
  label-badge-text-color: "#4B4B4D"
  label-badge-red: "#FFA23F"
  ### Cards ###
  paper-card-background-color: "#FFFFFF"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FF8300"
  paper-toggle-button-checked-bar-color: "#FFA23F"
  paper-toggle-button-unchecked-button-color: "#767679"
  paper-toggle-button-unchecked-bar-color: "#AAAAAD"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Dark – Yellow

Dark - Yellow

Dark - Yellow:
  ### Main Interface Colors ###
  primary-color: "#FCB800"
  light-primary-color: "#FFCD44"
  primary-background-color: "#141414"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#262626"
  ### Text ###
  primary-text-color: "#EBEBEB"
  secondary-text-color: "#FCB800"
  text-primary-color: "#141414"
  disabled-text-color: "#5D5D5D"
  ### Sidebar Menu ###
  sidebar-icon-color: "#8E8E8E"
  sidebar-text-color: "#EBEBEB"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FCB800"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FCB800"
  state-icon-active-color: "#FDEAB0"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FCB800"
  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: "#515151"
  label-badge-text-color: "#EBEBEB"
  label-badge-red: "#515151"
  ### Cards ###
  paper-card-background-color: "#1A1A1A"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FCB800"
  paper-toggle-button-checked-bar-color: "#FFD45D"
  paper-toggle-button-unchecked-button-color: "#8E8E8E"
  paper-toggle-button-unchecked-bar-color: "#515151"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Light – Yellow

Light - Yellow

Light - Yellow:
  ### Main Interface Colors ###
  primary-color: "#FCB800"
  light-primary-color: "#FFCD44"
  primary-background-color: "#F2F2F2"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#DFDFDF"
  ### Text ###
  primary-text-color: "#141414"
  secondary-text-color: "#FCB800"
  text-primary-color: "#141414"
  disabled-text-color: "#A6A6A6"
  ### Sidebar Menu ###
  sidebar-icon-color: "#8E8E8E"
  sidebar-text-color: "#141414"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FCB800"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FCB800"
  state-icon-active-color: "#FDEAB0"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FCB800"
  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: "#FBFBFB"
  label-badge-text-color: "#141414"
  label-badge-red: "#515151"
  ### Cards ###
  paper-card-background-color: "#FBFBFB"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FCB800"
  paper-toggle-button-checked-bar-color: "#FFD45D"
  paper-toggle-button-unchecked-button-color: "#515151"
  paper-toggle-button-unchecked-bar-color: "#D3D3D3"
  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

 

  • Navy Blue & Yellow

Navy Blue & Yellow

Navy Blue & Yellow:
  ### Main Interface Colors ###
  primary-color: "#FEB221"
  light-primary-color: "#FECA67"
  primary-background-color: "#1F2635"
  secondary-background-color: var(--primary-background-color)
  divider-color: "#2D374D"
  ### Text ###
  primary-text-color: "#FBFBFB"
  secondary-text-color: "#FEB221"
  text-primary-color: "#FBFBFB"
  disabled-text-color: "#4A5E84"
  ### Sidebar Menu ###
  sidebar-icon-color: "#8192B6"
  sidebar-text-color: "#FBFBFB"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FEB221"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#FEAA0A"
  state-icon-active-color: "#FEF5D8"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#FEB221"
  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: "#3E4C6C"
  label-badge-text-color: "#FBFBFB"
  label-badge-red: "#252D40"
  ### Cards ###
  paper-card-background-color: "#252D40"
  paper-listbox-background-color: var(--primary-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#FEB221"
  paper-toggle-button-checked-bar-color: "#FECA67"
  paper-toggle-button-unchecked-button-color: "#6E81AA"
  paper-toggle-button-unchecked-bar-color: "#3E4C6C"
  ### 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