Alguns temas para a interface do Home Assistant

Partilha de Projectos
#1

Estive hoje a configurar os temas do meu HA, e resolvi compartilhar com vocês :blush:

O primeiro, é um tema que gosto de usar à noite. A dica é utilizar também uma automação, para alterar automaticamente entre o tema noturno e diurno.

image
image1919×972 126 KB 

  dark:
      primary-text-color: '#dbdbdb'
      secondary-text-color: '#cfcfcf4f'
      text-primary-color: '#d2d2d2'
      disabled-text-color: '#001117'
      primary-color: '#002c3f'
      dark-primary-color: '#002738'
      light-primary-color: '#001d29'
      accent-color: '#ff9800'
      divider-color: 'rgb(0, 29, 41)'
      state-icon-color: '#bebebe'
      state-icon-active-color: '#006394'
      state-icon-unavailable-color: 'var(--disabled-text-color)'
      card-background-color: '#00151e'
      primary-background-color: '#00151e'
      secondary-background-color: '#001d29'
      sidebar-text-color: 'var(--primary-text-color)'
      sidebar-background-color: 'var(--paper-listbox-background-color)'
      sidebar-icon-color: 'rgba(255, 255, 255, 0.67)'
      sidebar-selected-text-color: 'var(--primary-text-color)'
      sidebar-selected-icon-color: 'var(--primary-color)'
      toggle-button-color: 'var(--primary-color)'
      slider-color: 'var(--primary-color)'
      slider-secondary-color: 'var(--light-primary-color)'
      slider-bar-color: 'var(--disabled-text-color)'
      label-badge-background-color: 'white'
      label-badge-text-color: 'rgb(0, 44, 63)'
      label-badge-red: '#DF4C1E'
      label-badge-blue: '#039be5'
      label-badge-green: '#0DA035'
      label-badge-yellow: '#a1a1a1'
      label-badge-grey: 'var(--paper-grey-500)'
      paper-grey-50: '#001620'
      paper-grey-200: '#000f15'
      paper-grey-500: '#a01515'
      google-red-500: '#db4437'
      google-blue-500: '#4285f4'
      google-green-500: '#0f9d58'
      google-yellow-500: '#9c9c9c'
      paper-green-400: '#66bb6a'
      paper-blue-400: '#38464b'
      paper-orange-400: '#797876'
      dark-divider-opacity: '0.12'
      dark-disabled-opacity: '0.38'
      dark-secondary-opacity: '0.54'
      dark-primary-opacity: '0.87'
      light-divider-opacity: '0.12'
      light-disabled-opacity: '0.3'
      light-secondary-opacity: '0.7'
      light-primary-opacity: '1.0'
      paper-card-background-color: 'var(--card-background-color)'
      paper-listbox-background-color: 'var(--card-background-color)'
      paper-item-icon-color: 'var(--state-icon-color)'
      paper-item-icon-active-color: 'var(--state-icon-active-color)'
      table-row-background-color: 'var(--primary-background-color)'
      table-row-alternative-background-color: 'var(--secondary-background-color)'
      paper-toggle-button-checked-ink-color: 'var(--toggle-button-color)'
      paper-toggle-button-checked-button-color: 'var(--toggle-button-color)'
      paper-toggle-button-checked-bar-color: 'var(--toggle-button-color)'
      paper-toggle-button-unchecked-button-color: 'var(--toggle-button-unchecked-color, var(--paper-grey-50))'
      paper-toggle-button-unchecked-bar-color: 'var(--toggle-button-unchecked-color, #000000)'
      paper-slider-knob-color: 'var(--slider-color)'
      paper-slider-knob-start-color: 'var(--slider-color)'
      paper-slider-pin-color: 'var(--slider-color)'
      paper-slider-active-color: 'var(--slider-color)'
      paper-slider-secondary-color: 'var(--slider-secondary-color)'
      paper-slider-container-color: 'var(--slider-bar-color)'
      ha-paper-slider-pin-font-size: '15px'

Verde.

image
image1919×971 134 KB 

  green:
      primary-text-color: '#111111'
      secondary-text-color: '#a0a0a0'
      text-primary-color: '#006f6c'
      disabled-text-color: '#00636d40'
      primary-color: '#006f6c'
      dark-primary-color: '#006f6c'
      light-primary-color: '#006f6c'
      accent-color: '#ff9800'
      divider-color: 'rgba(0, 0, 0, .12)'
      state-icon-color: '#006f6c'
      state-icon-active-color: '#FDD835'
      state-icon-unavailable-color: 'var(--disabled-text-color)'
      card-background-color: '#ffffff'
      primary-background-color: '#ffffff'
      secondary-background-color: '#e5e5e5'
      sidebar-text-color: 'var(--primary-text-color)'
      sidebar-background-color: 'var(--paper-listbox-background-color)'
      sidebar-icon-color: '#006f6c'
      sidebar-selected-text-color: 'var(--primary-text-color)'
      sidebar-selected-icon-color: 'var(--primary-color)'
      toggle-button-color: 'var(--primary-color)'
      slider-color: 'var(--primary-color)'
      slider-secondary-color: 'var(--light-primary-color)'
      slider-bar-color: 'var(--disabled-text-color)'
      label-badge-background-color: 'white'
      label-badge-text-color: 'rgb(0, 111, 108)'
      label-badge-red: '#DF4C1E'
      label-badge-blue: '#039be5'
      label-badge-green: '#0DA035'
      label-badge-yellow: '#f4b400'
      label-badge-grey: 'var(--paper-grey-500)'
      paper-grey-50: '#fafafa'
      paper-grey-200: '#eeeeee'
      paper-grey-500: '#006f6c'
      google-red-500: '#db4437'
      google-blue-500: '#4285f4'
      google-green-500: '#0f9d58'
      google-yellow-500: '#f4b400'
      paper-green-400: '#66bb6a'
      paper-blue-400: '#42a5f5'
      paper-orange-400: '#ffa726'
      dark-divider-opacity: '0.12'
      dark-disabled-opacity: '0.38'
      dark-secondary-opacity: '0.54'
      dark-primary-opacity: '0.87'
      light-divider-opacity: '0.12'
      light-disabled-opacity: '0.3'
      light-secondary-opacity: '0.7'
      light-primary-opacity: '1.0'
      paper-card-background-color: 'var(--card-background-color)'
      paper-listbox-background-color: 'var(--card-background-color)'
      paper-item-icon-color: 'var(--state-icon-color)'
      paper-item-icon-active-color: 'var(--state-icon-active-color)'
      table-row-background-color: 'var(--primary-background-color)'
      table-row-alternative-background-color: 'var(--secondary-background-color)'
      paper-toggle-button-checked-ink-color: 'var(--toggle-button-color)'
      paper-toggle-button-checked-button-color: 'var(--toggle-button-color)'
      paper-toggle-button-checked-bar-color: 'var(--toggle-button-color)'
      paper-toggle-button-unchecked-button-color: 'var(--toggle-button-unchecked-color, var(--paper-grey-50))'
      paper-toggle-button-unchecked-bar-color: 'var(--toggle-button-unchecked-color, #000000)'
      paper-slider-knob-color: 'var(--slider-color)'
      paper-slider-knob-start-color: 'var(--slider-color)'
      paper-slider-pin-color: 'var(--slider-color)'
      paper-slider-active-color: 'var(--slider-color)'
      paper-slider-secondary-color: 'var(--slider-secondary-color)'
      paper-slider-container-color: 'var(--slider-bar-color)'
      ha-paper-slider-pin-font-size: '15px'

Cinza.

image
image1919×969 131 KB 

cinza:
  primary-color: "#484848"
  disabled-text-color: "#b5b5b5"
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  dark-primary-color: "#484848"
  google-green-500: "#484848"
  paper-item-icon-color: "#484848"
  paper-blue-400: "#484848"
  paper-slider-knob-color: "#949494"
  paper-slider-knob-start-color: "#949494"
  paper-slider-pin-color: "#949494"
  paper-slider-active-color: "#949494"
  paper-slider-secondary-color: "#949494"

E o último, dei o nome de CPHA, pois utiliza as cores do fórum.

image
image1919×973 133 KB 

cpha:
  primary-color: '#5294e2'
  state-icon-color: '#5294e2'
  sidebar-icon-color: 'rgb(82, 148, 226)'
  secondary-text-color: '#5294e2ab'

Para adicionar temas ao HA, basta colocar o código no frontend.yaml

Automação para alterar o tema durante a noite:

  #dark theme at night
  - alias: 'Set dark theme for the night'
    initial_state: True
    trigger:
      - platform: sun
        event: sunset
    condition:
      condition: state
      entity_id: input_boolean.dark_theme_status
      state: 'on'
    action:
      - service: frontend.set_theme
        data:
          name: dark
  #normal theme at day
  - alias: 'Set normal theme for day'
    initial_state: True
    trigger:
      - platform: sun
        event: sunrise
    condition:
      condition: state
      entity_id: input_boolean.dark_theme_status
      state: 'on'
    action:
      - service: frontend.set_theme
        data:
          name: Nome do tema que deseja usar durante o dia

E um Input_Boolean para ativar / desativar a automação.

input_boolean:
  dark_theme_status:
    initial: on

image

2 Curtiram
#2

Top muito bom. Exclente trabalho.

1 Curtiu
#3

As cores do fórum e do site vieram do meu tema do HA, a diferença é o fundo escuro.

or
or1920×1014 352 KB

2 Curtiram
#4

Muitoooo bom !!
:+1:t2::+1:t2:

1 Curtiu
#5

image
image1919×946 57.8 KB 

  # MyVariables
  base-hue: '30' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
  base-sat: '12%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
  # MyVar
  huesat: 'var(--base-hue), var(--base-sat),'
  # Primary Color
  primary-color: 'hsl(var(--huesat) 20%)'
  # Backgrounds
  primary-background-color: 'var(--primary-color)'
  secondary-background-color: 'hsl(var(--huesat) 16%)'
  paper-listbox-background-color: 'var(--primary-color)'
  paper-card-background-color: 'hsl(var(--huesat) 12%)'
  paper-dialog-background-color: 'var(--paper-card-background-color)'
  table-row-background-color: 'hsl(var(--huesat) 12%)'
  table-row-alternative-background-color: 'hsl(var(--huesat) 10%)'
  # Devider
  divider-color: 'hsla(0, 0%, 0%, 0)'
  dark-divider-opacity: '0'
  light-divider-opacity: '0'
  # Text colors
  primary-text-color: 'hsl(var(--huesat) 60%)'
  text-primary-color: 'hsl(var(--huesat) 60%)'
  secondary-text-color: 'hsl(var(--huesat) 60%)'
  disabled-text-color: 'hsl(var(--huesat) 70%)'
  sidebar-text_-_color: 'hsl(var(--huesat) 90%)'
  sidebar-text-color: 'hsl(var(--huesat) 90%)'
  paper-card-header-color: 'hsl(var(--base-hue), 90%, 50%)'
  # Text Adjustments
  paper-font-headline_-_letter-spacing: '-0.5px'
  paper-font-headline_-_font-weight: '500'
  paper-font-body1_-_font-weight: '500'
  # Nav Menu
  paper-listbox-color: 'hsl(var(--huesat) 50%)'
  paper-grey-50: 'hsl(var(--huesat) 50%)'
  paper-grey-200: 'hsla(var(--huesat) 26%)'
  # Paper card
  paper-item-icon-color: 'hsl(var(--huesat) 30%)'
  paper-item-icon-active-color: 'var(--paper-item-icon-color)'
  paper-item-icon_-_color: 'var(--paper-item-icon-color)'
  paper-item-selected_-_background-color: 'hsla(0, 0%, 0%, 0.2)'
  paper-tabs-selection-bar-color: 'hsla(0, 0%, 0%, 0.2)'
  # Labels
  label-badge-red: 'hsla(0, 0%, 0%, 0)'
  label-badge-border-color: 'var(--label-badge-red)'
  label-badge-background-color: 'var(--paper-card-background-color)'
  label-badge-text-color: 'var(--primary-text-color)'
  # Shadows
  shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(var(--huesat) 18%)'
  shadow-elevation-16dp_-_box-shadow: 'inset 0px 0px 0px 4px hsl(var(--huesat) 28%)'
  # Switches
  paper-toggle-button-checked-button-color: 'hsl(var(--base-hue), 90%, 50%)'
  paper-toggle-button-checked-bar-color: 'hsl(var(--huesat) 25%)'
  paper-toggle-button-unchecked-button-color: 'hsl(var(--huesat) 25%)'
  paper-toggle-button-unchecked-bar-color: 'hsl(var(--huesat) 5%)'
  # Sliders
  paper-slider-knob-color:  'hsl(var(--base-hue), 90%, 50%)'
  paper-slider-knob-start-color: 'hsl(var(--base-hue), 80%, 25%)'
  paper-slider-pin-color:  'hsl(var(--base-hue), 90%, 50%)'
  paper-slider-active-color:  'hsl(var(--base-hue), 90%, 50%)'
  paper-slider-container-color: 'hsl(var(--huesat) 28%)'
  paper-slider-secondary-color: 'hsl(var(--huesat) 90%)'
  paper-slider-disabled-active-color: 'hsl(var(--base-hue), 80%, 25%)'
  paper-slider-disabled-secondary-color: 'hsl(var(--base-hue), 80%, 25%)'
  paper-dialog-color: 'hsl(var(--base-hue), 20%, 80%)'```
2 Curtiram
#6

e depois de coloca no frontend como altero entre eles ?
Poderia postar tua automação para trocar automatico de tema ?

1 Curtiu
#7

Para alterar basta ir em configurações > Geral > Selecionar Tema (Última opção).
Breve atualizei o tópico com a automação :slight_smile:

#8

Não tenho essa opção, tem apenas a opção de alterar IDIOMA.

1 Curtiu
#9

Qual versão do HA você está utilizando?

#10

estou usando 0.66.1, eu uso homeassistant e nao HASSIO

#11

Bom, você pode tentar fazer isso.

image
image765×775 35 KB

1 Curtiu
#12

Home Assistant é uma plataforma de automação. Hassio é um sistema operativo com o Home Assistant incorporado, tal como o raspbian e o hassbian.

1 Curtiu
#13

Podes mudar o tema com uma automação#### CHOOSE THEME

automation:
  - alias: 'Temas'
    initial_state: 'on'
    trigger:
      - platform: state
        entity_id: input_select.hass_template
    action:
      - service: frontend.set_theme
        data_template:
          name: "{{ states.input_select.hass_template.state }}"

mais isto,

input_select:
#### Escolha da cor dos temas
hass_template:
    name: Escolha um tema
    options:
      - escuro_azul
      - claro_laranja
    initial: escuro_azul
    icon: mdi:theme-light-dark

e colocas tudo num grupo

1 Curtiu
#14

Nao funcionou, vou postar minhas configs:
os temas estao dentro da pasta THEMES

frontend:
  themes: !include_dir_merge_named themes/
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html


automation:
 - alias: 'Temas'
   initial_state: 'on'
   trigger:
     - platform: state
       entity_id: input_select.hass_template
   action:
     - service: frontend.set_theme
       data_template:
         name: "{{ states.input_select.hass_template.state }}"

Input:
hass_theme:
  name: Temas
  options:
    - dark
    - lightblue
    - cpha
  initial: dark
  icon: mdi:theme-light-dark
#15

@CarlosMartins tens que colocar aqui o código mas quando o colocares clica em <> senão é dificil detectar o erro.

#16

Estes temas dão para instalar no hassbian?

#17

Sim, normal. São padrão

#18

Ja ajustei o codigo, o problema persiste.

#19

Mude o seu Input: para input_select

input_select:
hass_theme:
  name: Temas
  options:
    - dark
    - lightblue
    - cpha
  initial: dark
  icon: mdi:theme-light-dark
1 Curtiu
#20

Ja esta em input_select, mesmo assim nao funciona.

Copyright © 2017-2021. Todos os direitos reservados
CPHA.pt - info@cpha.pt

FAQ | Termos de Serviço/Regras | Política de Privacidade