Install HACS in Home Assistant for themes and custom cards

The Home Assistant Community Store, aka HACS, is an add-on for Home Assistant. It provides a web interface to easily discover and install custom elements like custom cards, themes, and custom integrations. In this guide, I’ll be showing you how to install HACS in Home Assistant. I will also show you how to install and configure a custom card and a theme to have an idea of how to use HACS.

Installation

The installation of HACS in Home Assistant is simple. You would need to use a terminal and run one command to download and install it. In this guide, we’ll be installing HACS in the Home Assistant OS version. However, the installation process on other versions of Home Assistant is almost the same.

The terminal that I use is the one included in the VS Code add-on. We are also going to use VS Code to access the Home Assistant configuration files. So, definitely install it if you don’t have it set up yet. Alternatively, you can also install HACS using the SSH & Web Terminal add-on.

To open the terminal in VS Code, click on the menu icon on the top left corner, go to Terminal and click on New Terminal. The terminal automatically opened inside the config folder. So, type cd and press enter to change the directory. After that, run the following command to install HACS: wget -q -O - https://install.hacs.xyz | bash -.

When the installation completes, you need to restart Home Assistant before moving forward with the configuration. So, in the terminal, run the command, ha core restart.

Configuration

To configure HACS go to Configuration, Integrations, and click on Add integration. Then, search for HACS, and click on it to add it.

A pop-up comes up where you need to acknowledge that HACS has no add-ons and that all elements available are custom and untested by the Home Assistant developers. Also, for troubleshooting purposes, you need to know how to access your Home Assistant logs and that you need to disable all custom components to pinpoint the cause of any issue. So, check all the boxes and then click on Submit.

Next, you need to register your device with HACS, so copy the code provided and click on the link in step 1. The GitHub page comes up where you will need to sign in or create an account. If you are already signed in to GitHub, the device activation page comes up where you’ll need to enter the code provided in Home Assistant. Click on Continue and then authorize HACS to access your GitHub account.

After the device is successfully connected, go back to Home Assistant, and on the pop-up, click on Finish. The HACS web interface should now be available from the sidebar. If it doesn’t show up, you can just refresh the page.

Installing custom cards

There is a very popular custom card called Mini Media Player. With this card, you can set up media player entities in a more compact way than the regular media control card in Home Assistant. It also comes with other features that allow you to change the appearance of the card.

To install a custom card, go back into HACS, click on Frontend, click Explore & add repositories and search for Mini Media Player. Click on it to open it and then click on Install this repository in HACS. A pop-up comes up where you can select which version you want to install. Leave it set to the latest version and then click on Install. After you install the card, click on Reload to refresh the Home Assistant page.

Next, click on Repository to go to the developer’s page. The repository will have details on how to set up the custom card and the variables you can use to customize the card’s appearance.

Adding custom cards to the dashboard

To add the custom card to your Home Assistant web interface, go to the Dashboard, click on the menu icon on the top right, click Edit Dashboard and then Add card.

Some custom cards have a visual editor to add and edit the card easily. However, for the custom cards that don’t have it available, you would need to configure the card using the Manual card.

The Mini media player card does have a visual editor. However, the functionality is limited. So, depending on how you want to customize the card, you might need to change to the code editor to add some of the variables.

When you open the Mini media player card, you can easily configure a few settings in the visual editor. Some of the examples are that you can select the entity that you would like to display. Set up a name and an icon for the entity and customize how you would like the artwork to show. Now, let’s say you don’t want the volume slider to show to make the card even smaller. The Mini media player card does have that option available. However, you would need to switch to the code editor and manually add the variable.

One of the bad things that I noticed with the custom card is that it doesn’t show in the live preview when you make changes to the card. I’m not sure if it’s like that for all custom cards, but I did notice it with this one. You would have to save the card to see the changes that you make. Not a big deal but definitely something to have in mind.

Adding themes to Home Assistant

Now, let’s go over how to install themes. Home Assistant has a dark theme available besides the default light theme. And you can change the primary color and the access color for both themes. However, that’s all the customization that you can make directly from the web interface. If you want to change, for example, the border of the cards, remove the card’s drop shadow and do other things, you would then need to create a theme that would make all those customizations.

There are many good themes available via HACS that you can easily download and use. However, to add custom themes, you must configure a couple of things in Home Assistant. Go into VS Code, and in the config folder, open the configuration.yaml file. Then, enter the following anywhere inside that file:

frontend:
  themes: !include_dir_merge_named themes

Save the changes and then create a new folder called Themes. After that, reboot Home Assistant to apply the changes.

After Home Assistant is back online, to add a custom theme go back into HACS. Then go to Frontend and click on Explore & add repositories. To view just the themes that are currently available, uncheck the Lovelace option at the top. There are a few themes that I created myself. If you would like to download one of them, you can search for JuanMTech to get a list of the themes.

Select the theme you would like to download and then click on Install this repository in HACS. Then, on the pop-up that comes up, click on Install. And that is. If you open VS Code and check the Themes folder, you will see the new theme downloaded. Now to apply the theme, go to the Profile tab, and then under Theme, click on the dropdown to select the custom theme.

If you want to use a light theme and a dark theme, you can set up Home Assistant to automatically switch between the 2 when you change the mode on your computer or mobile device. To set it up, go to the Developer Tools and click on Services. Search for frontend.set_theme and select it. Then, below you have 2 options, Name and  Mode. Under Name, enter the name for the theme that you would like to set. Then under Mode, select either light or dark,  and then click on Call Service. After that, do the same process to set the theme for the other mode.

To set up the themes to change automatically, go back to the Profile tab and change the theme to Backend-Selected. If you try to change the mode on your computer, Home Assistant will automatically switch between the two themes.

HACS has many different custom cards, themes, and components available to add to your home assistance. However, do have in mind that everything available in HACS is untested by the Home Assistant developers. If you ever have a problem with your Home Assistant instant, the first step to troubleshoot is to disabled all custom elements so you can check if they are causing an issue.