Page tree

Welcome to FreeSoftwareServers Confluence Wiki

Skip to end of metadata
Go to start of metadata

https://www.home-assistant.io/integrations/frontend/

https://www.awesome-ha.com/#themes

Note: Many frontends I tried had issues straight away, but the two below were updated less than 6 months ago and worked asap! 

https://github.com/liri/lovelace-themes/blob/master/themes/google-home.yaml

https://github.com/seangreen2/slate_theme/blob/master/themes/slate.yaml

I was extremely pleasantly surprised to find this themed the App as well!

themes.yaml:

cat << 'EOF' >>themes.yaml
#https://github.com/liri/lovelace-themes/blob/master/themes/google-home.yaml
Google - Light:
  ### Fonts ###
  primary-font-family: "'Open Sans','Rubik',Roboto,sans-serif"
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"

  ha-card-border-radius: "0px"
  ha-card-header-color: "#757575"
  ha-card-box-shadow: "0px 0px 1px #eeeeee"

  ### Main Interface Colors ###
  app-header-background-color: "#ffffff"
  primary-color: "#000000"
  light-primary-color: "#c1c1c1"
  primary-background-color: "#F7F9FB"
  secondary-background-color: "#ffffff"
  divider-color: "#e7e7e7"
  ### Text ###
  primary-text-color: var(--primary-color)
  secondary-text-color: "#757575"
  text-primary-color: "#061014"
  disabled-text-color: "#a1a1a1"
  ### Sidebar Menu ###
  sidebar-background-color: "#ffffff"
  sidebar-icon-color: "#757575"
  sidebar-text-color: "#212121"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#4284F4"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#606367"
  state-icon-active-color: "#ffb750"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#4284F4"
  paper-slider-knob-start-color: "#8eb8ff"
  paper-slider-pin-color: "#8eb8ff"
  paper-slider-active-color: "#8eb8ff"
  paper-slider-secondary-color: var(--light-primary-color)
  paper-slider-container-color: "#e7e7e7"
  ### Labels ###
  label-badge-background-color: "#252B36"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: "#6C7B9B"
  ### Cards ###
  paper-card-background-color: "#ffffff"
  paper-listbox-background-color: "#ffffff"
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#4284F4"
  paper-toggle-button-checked-bar-color: "#4284F4"
  paper-toggle-button-unchecked-button-color: "#4284F4"
  paper-toggle-button-unchecked-bar-color: "#c1c1c1"

  ### Dialog ###
  paper-dialog-background-color: "#ffffff"

  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

  iron-overlay-backdrop-background-color: "#ffffff"
  mdc-theme-primary: "#4284F4"

  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"

Google - Dark:
  ### Fonts ###
  primary-font-family: "'Open Sans','Rubik',Roboto,sans-serif"
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"

  ha-card-border-radius: "0px"
  ha-card-header-color: "#d7d7d7"
  ha-card-box-shadow: "0px 0px 1px #000000"

  ### Main Interface Colors ###
  app-header-background-color: "#000000"
  primary-color: "#ffffff"
  light-primary-color: "#2b2b2b"
  primary-background-color: "#000000"
  secondary-background-color: "#2b2b2b"
  divider-color: "#2b2b2b"
  ### Text ###
  primary-text-color: var(--primary-color)
  secondary-text-color: "#d7d7d7"
  text-primary-color: "#ffffff"
  disabled-text-color: "#a1a1a1"
  ### Sidebar Menu ###
  sidebar-background-color: "#000000"
  sidebar-icon-color: "#ffffff"
  sidebar-text-color: "#ffffff"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#4284F4"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ### 
  state-icon-color: "#ffffff"
  state-icon-active-color: "#ffb750"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#4284F4"
  paper-slider-knob-start-color: "#8eb8ff"
  paper-slider-pin-color: "#8eb8ff"
  paper-slider-active-color: "#8eb8ff"
  paper-slider-secondary-color: var(--light-primary-color)
  paper-slider-container-color: "#a1a1a1"
  ### Labels ###
  label-badge-background-color: "#252B36"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: "#6C7B9B"
  ### Cards ###
  paper-card-background-color: "#2b2b2b"
  card-background-color: var(--paper-card-background-color)
  paper-listbox-background-color: "#000000"
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#4284F4"
  paper-toggle-button-checked-bar-color: "#4284F4"
  paper-toggle-button-unchecked-button-color: "#4284F4"
  paper-toggle-button-unchecked-bar-color: "#c1c1c1"

  ### Dialog ###
  paper-dialog-background-color: "#2b2b2b"

  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

  iron-overlay-backdrop-background-color: "#000000"
  mdc-theme-primary: "#4284F4"

  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"

#https://github.com/seangreen2/slate_theme/blob/master/themes/slate.yaml
slate:
  # Main colors
  primary-color: '#2980b9'
  accent-color: '#b58e31'
  dark-primary-color: '#2980b9'
  light-primary-color: '#2980b9'
  # Text colors
  primary-text-color: '#FFFFFF'
  text-primary-color: 'var(--primary-text-color)'
  secondary-text-color: '#b58e31'
  disabled-text-color: '#777777'
  label-badge-border-color: 'green'
  # Sidebar
  sidebar-icon-color: '#777777'
  # Background colors
  primary-background-color: '#222222'
  secondary-background-color: '#222222'
  divider-color: 'rgba(0, 0, 0, .12)'
  table-row-background-color: '#292929'
  table-row-alternative-background-color: '#292929'
  # Nav Menu
  paper-listbox-color: '#777777'
  paper-listbox-background-color: '#141414'
  paper-grey-50: 'var(--primary-text-color)'
  paper-grey-200: '#222222'
  # Paper card
  paper-card-header-color: '#2980b9'
  paper-card-background-color: '#292929'
  paper-dialog-background-color: '#292929'
  paper-item-icon-color: 'var(--primary-text-color)'
  paper-item-icon-active-color: '#b58e31'
  paper-item-icon_-_color: 'green'
  paper-item-selected_-_background-color: '#292929'
  paper-tabs-selection-bar-color: 'green'
  # Labels
  label-badge-red: 'var(--primary-color)'
  label-badge-text-color: 'var(--primary-text-color)'
  label-badge-background-color: '#222222'
  # Switches
  paper-toggle-button-checked-button-color: '#2980b9'
  paper-toggle-button-checked-bar-color: '#2980b9'
  paper-toggle-button-checked-ink-color: '#2980b9'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
  switch-checked-color: 'var(--paper-toggle-button-checked-button-color)'
  switch-unchecked-color: 'var(--disabled-text-color)'
  switch-unchecked-button-color: 'var(--disabled-text-color)'
  switch-unchecked-track-color: 'var(--disabled-text-color)'
  # Sliders
  paper-slider-knob-color: '#2980b9'
  paper-slider-knob-start-color: '#2980b9'
  paper-slider-pin-color: '#2980b9'
  paper-slider-active-color: '#2980b9'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'
  # Google colors
  google-red-500: '#b93829'
  google-green-500: '#2980b9'
  # Changes to fix history/logbook menus
  lumo-primary-text-color: '#2980b9'
  lumo-secondary-text-color: '#2980b9'
  lumo-primary-color: '#2980b9'
  # Calendar day numbers
  lumo-body-text-color: '#b58e31'
  # Calendar/Date-Picker Background
  lumo-base-color: '#222222'
  # Month/Year header
  lumo-header-text-color: 'var(--lumo-body-text-color)'
  # DayOfWeek Header
  lumo-tertiary-text-color: 'var(--lumo-body-text-color)'
  lumo-shade: '#222222'
  lumo-shade-90pct: 'rgba(34, 34, 34, .9)'
  lumo-shade-80pct: 'rgba(34, 34, 34, .8)'
  lumo-shade-70pct: 'rgba(34, 34, 34, .7)'
  lumo-shade-60pct: 'rgba(34, 34, 34, .6)'
  lumo-shade-50pct: 'rgba(34, 34, 34, .5)'
  lumo-shade-40pct: 'rgba(34, 34, 34, .4)'
  lumo-shade-30pct: 'rgba(34, 34, 34, .3)'
  lumo-shade-20pct: 'rgba(34, 34, 34, .2)'
  lumo-shade-10pct: 'rgba(34, 34, 34, .1)'
  lumo-shade-5pct: 'rgba(34, 34, 34, .05)'
  lumo-tint-5pct: '#222222'
  # fix for device configuration screen
  card-background-color: "var(--paper-card-background-color)"
  # Fix for Person Device Chooser - thanks to vajonam!
  material-background-color: "var(--paper-listbox-background-color)"
  material-secondary-background-color: '#222222'
  material-body-text-color: '#FFFFFF'
EOF

automations.yaml:

cat << 'EOF' >>automations.yaml
- alias: 'Set theme at startup'
  trigger:
    platform: homeassistant
    event: start
  action:
    service: frontend.set_theme
    data:
      name: Google - Dark
EOF

configuration.yaml:

cat << 'EOF' >>configuration.yaml
#Theme
frontend:
  themes: !include themes.yaml
EOF
  • No labels