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:
Allow to define different themes. See below for further details.
Starting with version 0.49 you can define themes:
# Example configuration.yaml entry frontend: themes: happy: primary-color: pink text-primary-color: purple mdc-theme-primary: plum sad: primary-color: blue
The example above defined two themes named
sad. For each theme you can set values for CSS variables. If you want to provide hex color values, wrap those in apostrophes, since otherwise YAML would consider them to be comments (
primary-color: '#123456'). For a partial list of variables used by the main frontend see ha-style.ts.
As with all configuration, you can either:
- Directly specify the themes inside your
- Put them into a separate file (e.g.
themes.yaml) and include that in your configuration (
themes: !include themes.yaml)
- Create a dedicated folder (e.g.
my_themes) and include all files from within this folder (
themes: !include_dir_merge_named my_themes)
For more details about splitting up the configuration into multiple files, see this page.
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: Sets backend-preferred theme name.
|Service data attribute||Description|
||Name of the theme to set,
||If the theme should be applied in light or dark mode
If no dark mode backend theme is set, the light mode theme will also be used in dark mode. The backend theme settings will be saved and restored on a restart of Home Assistant.
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.
This will overrule the theme settings set by the above service calls, and will only be applied to the current device.
Set a theme
# Example configuration.yaml entry frontend: extra_module_url: - /local/my_module.js extra_js_url_es5: - /local/my_es5.js
Modules will be loaded with
import(), on devices that support it (
For other devices (
es5 mode) you can use
extra_js_url_es5, this will be loaded with
<script defer src=''></script>
The ES5 and module version will never both be loaded, depending on if the device supports
import the module of ES5 version will be loaded.
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