home-assistant.io/source/_components/frontend.markdown

layout	title	description	date	sidebar	comments	sharing	footer	logo	ha_category	ha_qa_scale
page	Frontend	Offers a frontend to Home Assistant.	2015-12-06 21:35	true	false	true	true	home-assistant.png	Other	internal

This offers the official frontend to control Home Assistant.

# Example configuration.yaml entry
frontend:

{% configuration %} javascript_version: description: "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 putting es5 or latest in the URL. For example http://localhost:8123/states?es5 " required: false type: string default: auto themes: description: Allow to define different themes. See below for further details. required: false type: map keys: "[identifier]": description: Name to use in the frontend. required: true type: [list, map] keys: "[css-identifier]": description: The CSS identifier. required: true type: [list, string] extra_html_url: description: "List of additional resources to load in latest javascript mode." required: false type: list extra_html_url_es5: description: "List of additional resources to load in es5 javascript mode." required: false type: list development_repo: description: Allow to point to a directory containing frontend files instead of taking them from a pre-built PyPI package. Useful for Frontend development. required: false type: string {% endconfiguration %}

{% linkable_title 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.

{% linkable_title Theme automation %}

There are 2 themes-related services:

• frontend.reload_themes: reloads theme configuration from your configuration.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:00'
    action:
      - service: frontend.set_theme
        data:
          name: darkred

{% linkable_title Manual Theme Selection %}

When themes are enabled in the configuration.yaml file, a new option will show up in the user profile menu (before 0.77 it was in the Configuration panel under General called "Set a theme"). You can then choose any installed theme from the dropdown list and it will be applied immediately.

Set a theme

{% linkable_title 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='{{ extra_url }}' async> on any page (states and panels).

{% linkable_title Manual Language Selection %}

The browser language is automatically detected. To use a different language, go to the user profile menu (before 0.77 it was found in General in the Configuration panel) and select one. It will be applied immediately.

Choose a Language