Frontend
This offers the official frontend to control Home Assistant.
# Example configuration.yaml entry
frontend:
Themes
Starting with version 0.49 you can define themes:
Example:
# Example configuration.yaml entry
frontend:
themes:
happy:
primary-color: pink
sad:
primary-color: blue
The example above defined two themes named happy
and sad
. For each theme you can set values for CSS variables. For a partial list of variables used by the main frontend see ha-style.html.
There are 2 themes-related services:
frontend.reload_themes
: reloads theme configuration from yourconfiguration.yaml
file.frontend.set_theme(name)
: sets backend-preferred theme name.
Example in automation:
Set a theme at the startup of Home Assistant:
automation:
- alias: 'Set theme at startup'
initial_state: 'on'
trigger:
- platform: homeassistant
event: start
action:
service: frontend.set_theme
data:
name: happy
To enable “night mode”:
automation:
- alias: 'Set dark theme for the night'
initial_state: True
trigger:
- platform: time
at: '21:00'
action:
- service: frontend.set_theme
data:
name: darkred
Manual Theme Selection
When themes are enabled in the configuration.yaml
file, a new option will show up in the Configuration panel under configuration.yaml
called “Set a theme.” You can then choose any installed theme from the dropdown list and it will be applied immediately.
Loading extra HTML
Starting with version 0.53 you can specify extra HTML files to load.
Example:
# Example configuration.yaml entry
frontend:
extra_html_url:
- https://example.com/file1.html
- /file2.html
Those will be loaded via <link rel='import' href='' async>
on any page (states and panels)