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
C O D E L A B Y 