This offers the official frontend to control Home Assistant.
# Example configuration.yaml entry frontend:
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 putting
latestin the URL. For example
Allow to define different themes. See below for further details.
List of additional resources to load in
Allow to point to a directory containing frontend files instead of taking them from a pre-built PyPI package. Useful for Frontend development.
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
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.
There are 2 themes-related services:
frontend.reload_themes: reloads theme configuration from your
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
When themes are enabled in the
configuration.yaml file, a new option will show up in the user profile menu (accessed by clicking your user account initials at the top of the sidebar). You can then choose any installed theme from the dropdown list and it will be applied immediately.
Set a theme
Starting with version 0.53 you can specify extra HTML files to load, and starting with version 0.95 extra JS modules.
# 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>.
The browser language is automatically detected. To use a different language, go to the user profile menu (accessed by clicking your user account initials at the top of the sidebar) and select one. It will be applied immediately.
Choose a Language