Tag: theme

Step 6: Components

Home Assistant accepts add-ons and custom components to expand the functionality and provide complete customisation by being able to write a new component if one does not exist already.

Custom components are uploaded to a folder within the ‘config’ directory of the Home Assistant installation and add integrations, custom cards and themes. There is a system available to make this process easier called the Home Assistant Community Store or HACS for short, which allows you to install community made components in a couple of clicks.

Before we get to HACS lets look at the built in Add-On store available via the Supervisor, from here you can install updates, take snapshots of the system and install items that expand Home Assistant itself, such as dns services, reverse proxy, smb and ftp access and many more.

Some add-ons can open ports and access to your system and depending on your specific setup on how in-secure this can make you. Thankfully Home Assistant make this very clear with badges detailing the requirements and security level of the add-on. This even covers items such as the ftp and smb as they allow access to the ‘config’ folder’, but you can simply stop the service, ensure that it is not set to run at startup of Home Assistant and only run it when you need to use it.

HACS itself needs to be added via the manual method and requires a GitHub access token, but has well documented the process on their site hacs.xyz, but the run down is:

  1. download HACS from github
  2. upload the contents of hacs.zip to the custom_configuration folder within your ‘config’ folder
  3. restart Home Assistant
    Configuration -> Server Controls -> Server management -> Restart
  4. add HACS from the Integration panel
    Configuration -> Integrations
  5. enter your GitHub access token
  6. access HACS
    HACS

As mentioned, HACS allows you to add integrations, plugins and themes with just a few clicks and prompts you if a restart of Home Assistant is needed to complete the install of the new component to take advantage of.

Next: Step 7: Senses

Step 4: Looks

Home Assistant doesn’t come out of the box with any themes, which is a shame – but there are loads available from the community.

In this part of the guide we are going to use the manual process of editing the frontend.yaml file to add a selection of themes, but later will show you how to enable HACS the Home Assistant Community Store. Although it is called a store there is no charge for adding any of the integrations, plugins or themes.

Home Assistant has a built in File editor (aka Configurator) which allows you to manually change any of the YAML files affecting the operation of Home Assistant. Most of these sections are configurable through the core Configuration panel, but some are still being migrated.

Accessing the File Editor is easy:

Supervisor -> File editor -> Open Web UI

You can also enable the ‘Show in Sidebar’ option which will give you a direct link to the Web UI of the Configurator. Especially useful at the beginning as you’ll often flick back and forth between that and the Server Controls in Configuration to restart the system and enable the changes. This is why using the built-in Configuration panel is preferred as it allows for many automatic changes without restarting.

Unfortunately, frontend theme configuration is still done directly through the YAML files (or HACS), but will use this opportunity to demonstrate how to use the File editor.

Configurator Home Page

The above screen shot of the File editor shows the core sections:

  1. File selector
  2. File name being edited
  3. File contents
  4. Save and close file
  5. New file

For this setup we are going to add some themes, so by using the file selector (1) you can choose ‘configuration.yaml’ which is the main configuration file.

We are going to add an include statement that allows us to offload the frontend configuration into another file so that the main file doesn’t get difficult to read.

frontend: !include frontend.yaml

Adding this to the ‘configuration.yaml’ file tells Home Assistant to look for and use a file called ‘frontend.yaml’

Therefore, after saving (4) and then using the new file (5) option you can create a ‘frontend.yaml’ file and add the themes into it (3).

Obviously you can write your own theme and there is some detail about how in Home Assistant documentation, but another option is to use someone elses frontend.yaml.

Due to manually editing the ‘frontend.yaml’ you’ll need to restart Home Assistant for it to re-read the configuration files.

Configuration -> Server Controls -> Server management -> Restart

Then select via the user profile what theme you want to use or get Home Assistant to set it for you depending on a sensor value, such as the Sun…

Next: Step 5: Sun & Moon via Footstep 2: Config