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.
Table of Contents
Installation
The installation of HACS inHome Assistantis 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 theVS 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 theSSH & 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 toConfiguration,Integrations, and click onAdd integration. Then, search forHACS, 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 onSubmit.
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 onContinueand 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 onFinish. 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 calledMini 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 onFrontend, clickExplore & add repositoriesand search for Mini Media Player. Click on it to open it and then click onInstall 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 onInstall. After you install the card, click onReloadto refresh the Home Assistant page.
Next, click onRepositoryto 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 theDashboard, click on the menu icon on the top right, clickEdit Dashboardand thenAdd 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 theconfiguration.yamlfile. Then, enter the following anywhere inside that file:
frontend:themes: !include_dir_merge_named themesSavethe changes and then create a new folder calledThemes. 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 toFrontendand click onExplore & 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 forJuanMTechto get a list of the themes.
Select the theme you would like to download and then click onInstall this repository in HACS. Then, on the pop-up that comes up, click onInstall. 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 theProfiletab, and then underTheme, 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 theDeveloper Toolsand click onServices. Search forfrontend.set_themeand select it. Then, below you have 2 options,NameandMode. UnderName, enter the name for the theme that you would like to set. Then underMode, select either light or dark, and then click onCall 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 theProfiletab and change the theme toBackend-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.
