Home Assistant Frontend
This offers the official frontend to control Home Assistant. This integration is by default enabled, unless you’ve disabled or removed the default_config:
line from your configuration. If that is the case, the following example shows you how to enable this integration manually:
# Example configuration.yaml entry
frontend:
Configuration Variables
- javascript_version
-
(string)(Optional)
DEPRECATED, it is now done using feature detection in the browser. Version of the JavaScript to serve to clients. Options:
es5
- transpiled so old browsers understand it.latest
- not transpiled, so will work on recent browsers only.auto
- select a version according to the browser user-agent. The value in the config can be overiden by puttinges5
orlatest
in the URL. For examplehttp://localhost:8123/states?es5
Default value:
auto
- themes
(map)(Optional)
Allow to define different themes. See below for further details.
- extra_html_url
(list)(Optional)
List of additional resources to load in
latest
javascript mode.- extra_module_url
(list)(Optional)
List of additional javascript modules to load.
- extra_js_url_es5
(list)(Optional)
List of additional javascript code to load in
es5
javascript mode.- development_repo
(string)(Optional)
Allow to point to a directory containing frontend files instead of taking them from a pre-built PyPI package. Useful for Frontend development.
Defining Themes
Starting with version 0.49 you can define themes:
# 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.ts.
Check our community forums to find themes to use.
Theme automation
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'
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'
trigger:
- platform: time
at: '21:00: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 user profile page (accessed by clicking your user account initials at the bottom of the sidebar). You can then choose any installed theme from the dropdown list and it will be applied immediately.
Set a theme
Loading extra HTML
Starting with version 0.53 you can specify extra HTML files to load, and starting with version 0.95 extra JS modules.
Example:
# Example configuration.yaml entry
frontend:
extra_html_url:
- https://example.com/file1.html
- /local/file2.html
extra_module_url:
- /local/my_module.js
HTML will be loaded via <link rel='import' href='' async>
on any page (states and panels), and modules via <script type='module' scr=''></script>
.
Manual Language Selection
The browser language is automatically detected. To use a different language, go to the user profile page (accessed by clicking your user account initials at the bottom of the sidebar) and select one. It will be applied immediately.
Choose a Language