Instala el tema oscuro en Home Assistant

Los modos oscuros cada vez son más populares tanto en aplicaciones móviles como de escritorio así como en páginas web. Ahora mismo tengo el teléfono todo en modo oscuro y cada vez que abría Home Assistant el cambio era molesto y decidí arreglarlo.

Si todavía no dispones de una instalación de Home Assistant en tu casa te recomiendo que sigas esta guía paso a paso.

Tabla de contenido

Activa el modo oscuro en Home Assistant
1. Instalar el tema
2. Activar el tema

Activa el modo oscuro en Home Assistant

Instalar el tema

Lo primero que debemos hacer es instalar el tema en nuestra instalación y pare ello simplemente debemos añadir o crear el archivo /config/themes.yaml con el siguiente contenido:

dark:
  # Background image
  background-image: 'center / cover no-repeat url("/local/night.jpg") fixed'

  # Colors
  text-color: '#DADADB'                                                           # Grey text
  text-medium-light-color: '#A0A2A8'                                              # Medium-light grey text
  text-medium-color: '#80828A'                                                    # Medium grey text
  text-dark-color: '#6A6B74'                                                      # Dark grey text
  accent-color: '#008bef'                                                         # Blue
  accent-medium-color: '#2686c1'                                                  # Decent blue
  background-color: '#3b4049'                                                     # Dark grey background
  background-color-2: '#484E59'                                                   # Light grey background
  background-card-color: '#434952'                                                # Grey background
  border-color: '#383C46'                                                         # Grey border

  # Header
  primary-color: '#363941'                                                        # Background
  text-primary-color: 'var(--text-color)'                                         # Text
  
  # Left Menu
  paper-listbox-background-color: 'var(--background-color)'                       # Background
  sidebar-icon-color: 'var(--text-medium-color)'                                  # icons
  sidebar-selected-icon-color: 'var(--text-medium-light-color)'                   # Selected row icon and background (15%)
  sidebar-selected-text-color: 'var(--text-color)'                                # Selected row label

  # UI
  paper-card-header-color: 'var(--text-color)'                                    # Title in settings
  primary-background-color: 'var(--background-color)'                             # Background (also title background in left menu)
  mdc-theme-primary: 'var(--accent-medium-color)'                                 # Action Buttons (save, restart etc.)
  
  # Card
  paper-card-background-color: 'var(--background-card-color)'                     # Background
  dark-primary-color: 'var(--text-color)'
  primary-text-color: 'var(--text-color)'
  paper-listbox-color: 'var(--text-color)'
  light-primary-color: 'var(--text-dark-color)'
  secondary-text-color: 'var(--text-medium-color)'
  disabled-text-color: 'var(--text-dark-color)'
  paper-dialog-button-color: 'var(--text-color)'
  secondary-background-color: 'var(--background-color-2)'                         # Background more info title

Además de esto, en el archivo /config/configuration.yaml es importante que añadamos lo siguiente:

frontend:
  themes: !include themes.yaml

Activar el tema

Para activarlo vamos a nuestro perfil haciendo clic en nuestro nombre situado en la parte inferior de la barra lateral y ahí encontramos un selector de temas en donde debería estar el nuevo tema bajo el nombre dark.

Aviso

Si no aparece el tema y ambos archivos mencionados anteriormente están bien es porque debemos reiniciar el sistema para que recargue la configuración desde cero.

🆘 ¿Necesitas ayuda?

Únete a nuestro canal de ayuda en Telegram. Ahí, entre todos, nos ayudamos y enseñamos como mejorar más aún nuestra casa.

¡Necesito ayuda!