Cómo configurar temas en Home Assistant


Apuntes de como configurar temas en Home Assistant y sus principios de personalización.

Crear el archivo themes.yaml

Primero abra el archivo configuration.yaml y añade la directiva de soporte de temas

frontend:
  themes: !include themes.yaml

Luego, se debe crear un nombre de archivo themes.yaml dentro de la carpeta Home Assistant Config. abra el archivo e ingrese las directivas de color que desea configurar:

Tema base claro

Base Light:
  ### Main Interface Colors ###
  primary-color: "#03a9f4"
  light-primary-color: "#b3e5fC"
  dark-primary-color: "#0288d1"
  primary-background-color: "#ECEFF1"
  secondary-background-color: "#e5e5e5"
  divider-color: rgba(0, 0, 0, .12)
  accent-color: "#ff6524"
  ### Text ###
  primary-text-color: rgba(0, 0, 0, 0.87)
  secondary-text-color: rgba(0, 0, 0, 0.54)
  text-primary-color: "#FFFFFF"
  disabled-text-color: rgba(0, 0, 0, 0.38)
  ### Sidebar Menu ###
  sidebar-text-color: var(--primary-text-color)
  sidebar-background-color: var(--paper-listbox-background-color)
  sidebar-selected-text-color: var(--primary-color)
  sidebar-selected-icon-color: var(--primary-color)
  sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6)
  ### States and Badges ###
  state-icon-color: var(--dark-primary-color)
  state-icon-active-color: "#ffd24d"
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-spinner-color: var(--primary-color)
  error-state-color: var(--error-color)
  ### Sliders ###
  slider-color: var(--primary-color)
  slider-secondary-color: var(--light-primary-color)
  slider-bar-color: var(--disabled-text-color)
  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)
  ### Labels ###
  label-badge-grey: var(--paper-grey-500)
  label-badge-background-color: var(--paper-card-background-color)
  label-badge-text-color: var(--primary-text-color)
  label-badge-red: "#343443"
  ### Cards ###
  paper-card-background-color: "#fcfcfc"
  paper-listbox-background-color: var(--paper-card-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#04E762"
  paper-toggle-button-checked-bar-color: "#47FC92"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#343443"
  ### Table row ###
  table-row-background-color: var(--paper-card-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  ### Switches ###
  switch-checked-color: var(--primary-color)
  switch-checked-button-color: var(--switch-checked-color, var(--primary-background-color))
  switch-checked-track-color: var(--switch-checked-color, #000000)
  switch-unchecked-button-color: var(--switch-unchecked-color, var(--primary-background-color))
  switch-unchecked-track-color: var(--switch-unchecked-color, #000000)

Guarde los cambios y reinicie Home Assistant. Cuando vuelva a estar en línea, ingrese a su perfil de Asistente de inicio, y el menú Tema se podrá escoger los disponibles.

Al realizar un cambio en un tema si queremos ver el resultado se debe llamar el servicio frontend.reload_themes o bien reiniciar el Home Assistant

Tema oscuro

Base Dark:
  ### Main Interface Colors ###
  primary-color: "#03a9f4"
  light-primary-color: "#b3e5fC"
  dark-primary-color: "#0288d1"
  primary-background-color: "#000000"
  secondary-background-color: "#1D1C21"
  divider-color: rgba(255, 255, 255, .12)
  accent-color: "#ff6524"
  ### Text ###
  primary-text-color: rgba(255, 255, 255, 1)
  secondary-text-color: rgba(255, 255, 255, 0.70)
  text-primary-color: "#FFFFFF"
  disabled-text-color: rgba(0, 0, 0, 0.30)
  ### Sidebar Menu ###
  sidebar-text-color: rgba(255, 255, 255, 0.60)
  sidebar-background-color: var(--paper-listbox-background-color)
  sidebar-selected-text-color: var(--primary-color)
  sidebar-selected-icon-color: var(--primary-color)
  sidebar-icon-color: rgba(255, 255, 255, 0.60)
  ### States and Badges ###
  state-icon-color: var(--dark-primary-color)
  state-icon-active-color: "#ffd24d"
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-spinner-color: var(--primary-color)
  error-state-color: var(--error-color)
  ### Sliders ###
  slider-color: var(--primary-color)
  slider-secondary-color: var(--light-primary-color)
  slider-bar-color: var(--disabled-text-color)
  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)
  ### Labels ###
  label-badge-grey: var(--paper-grey-500)
  label-badge-background-color: var(--paper-card-background-color)
  label-badge-text-color: var(--primary-text-color)
  label-badge-red: "#343443"
  ### Cards ###
  paper-card-background-color: "#302F37"
  paper-listbox-background-color: var(--paper-card-background-color)
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#04E762"
  paper-toggle-button-checked-bar-color: "#47FC92"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: "#343443"
  ### Table row ###
  table-row-background-color: var(--paper-card-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  ### Switches ###
  switch-checked-color: var(--primary-color)
  switch-checked-button-color: var(--switch-checked-color, var(--primary-background-color))
  switch-checked-track-color: var(--switch-checked-color, #000000)
  switch-unchecked-button-color: rgba(255,255,255,.30)
  switch-unchecked-track-color: var(--switch-unchecked-color, #000000)

Material Design color para el texto

He usado los colores de Material Design de los temas claros y oscuros, teniendo en cuenta el canal alpha su transparencia, por eso

Color fondo #FFF
Color del texto base #000
Y para aplicar transparencia para el texto secundario por ejemplo rgba(0,0,0,0.54)

Color fondo #000
Color del texto base #FFF
Y para aplicar transparencia para el texto secundario por ejemplo rgba(255,255,255,0.70)

Recomiendo usar la heramienta Color Tool para econtrar aquella combianción adecuada, entre el color principal y el color accent

Extras

Si queremos tener una referencia visual para personalizar el tema del home assistant se puede hacer con el navegador crhome, acceder a las herramientas de programación pulsando la combinación de teclas ctrl+shift+I y luego con el selector primera herramienta selecionar la raiz html y veremos en la pestaña Styles los colores de cada elemento

Luego es solo ir viendo que etiqueta de color se ha modificado para cambiar en el archivo de configuración del tema de color

Anuncio publicitario

Publicado por Codelaby

Mobile DevDesigner

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: