< Go back to Home
Dwains Theme is only compatible with HA 0.107 or newer!
Did you read and followed the preparation part? No? Check that out first. If you experience any problems during the installation of Dwains Theme then please join my Discord server for live support questions so I can help you. Join my Discord Server here, it’s 100% free!
Follow all the steps on this page! Start with the HACS part.
Installing required HACS Plugins & Components #
This theme depends on some plugins and components from other developers. These plugins can be installed thought HACS.
Make sure you have installed HACS in your Home Assistant setup. If you don’t have HACS installed or you don’t know what HACS is, then you read the HACS Installation instructions here.
After you made sure you got HACS up and running you can continue to install Dwains Theme.
Install HACS plugins #
In the left side menu click on Community and then on the Tab PLUGINS. Search for each plugin in the table below and install it.
*NOTE: You don’t have to add each plugin JS url to your lovelace configuration/resources list. You just need to click Install for now on each plugin.
|Card-mod||Module||Yes||Add CSS styles to (almost) any lovelace card|
|Button Card||Module||Yes||Lovelace button-card for home assistant|
|Light Entity Card||js||Yes||Control any light or switch entity|
|Mini Graph Card||Module||Yes||Minimalistic graph card for Home Assistant Lovelace UI|
|auto-entities||Module||Yes||Automatically populate the entities-list of lovelace cards|
|layout-card||Module||Yes||Get more control over the placement of lovelace cards.|
|Custom Header||Module||Yes||Lovelace Custom Header|
|more-info-card||Module||Yes||Display the more-info dialog of any entity as a lovelace card|
|Lovelace Xiaomi Vacuum Map Card||Module||Yes||This card enables you to specify a target or start a zoned cleanup using live or static map, just like in Mi Home app. Additionally you can define a list of zones and choose the ones to be cleaned.|
|Atomic Calendar||Module||Yes||Custom calendar card for Home Assistant with Lovelace|
|state-switch||Module||Yes||Dynamically replace lovelace cards depending on occasion|
|Swipe Card||Module||Yes||Card that allows you to swipe throught multiple cards for Home Assistant Lovelace|
Install HACS components #
We also need to download 1 component from the HACS store. In the top tabs inside HACS click on the tab INTEGRATIONS and install the component from the table below.
|Browser mod||Integration||Yes||A Home Assistant integration to turn your browser into a controllable entity - and also an audio player|
After installing both HACS plugins and the 1 HACS component and you make sure you don’t forgot any, you can continue to install Dwains Theme below.
Installing Dwains theme #
Step 1 - Download Dwains Theme latest release #
Download the latest release from the release page.
Step 2 - Extract & move the download #
- Unzip the file you just downloaded and copy the content of it.
- Go to the main folder of your Home Assistant installation. This is the folder where you config is. (Hint: its the folder where the file
- Copy the content of the downloaded folder to the main folder of your Home Assistant installation.
Step 3 - Set the configuration files #
- Find and rename the
- Open your
configuration.yamlfile and make sure you don’t have the following lines (with sublines).
lovelace_gen:. Please remove these lines. From your existing
configuration.yaml. This is very important.
configuration-sample.yamlfrom the download and select the text between
Copy from heretill
Copy till hereand paste this at the top of your existing
Step 4 - Your existing configuration #
I have my full existing config in the
Okay then you are already set. If you had some code under the
homeassistant:line and want this back, then place it back under the following line
# If you had any important strings before in homeassistant: place them back here below.
I’m using HA packages folder
If you already are using HA packages, then you know how to work with it. Please make sure your
configuration.yamlis correct and has then
packages: !include_dir_named packages/under the
Step 5 - Configure Dwains Theme #
To configure/build the theme you need to edit the files in the folder
dwains-theme/configs/. When you open these file you see some examples commented-out, only uncomment the lines you want to use! If you want to know how you need to configure these files, go to the Configure Dwains Theme page.
Step 6 - Restart Home Assistant #
NOTE: Your Home Assistant frontend can have some error. In this case you forgot a HACS plugin or you made a mistake in any of the config files. Always clear your browser cache when you receive errors.
That’s it! Dwains Theme should now be installed.
Let me know on the HA forum if you like my theme :D
What’s next? #
Now that you have installed all the required plugins and the Dwains Theme core files you can edit the Dwains theme configuration files.
Configure Dwains Theme
Also read here some handy how to’s:
And checkout some Tips & Tricks of Dwains Theme.
WARNING: Please don’t change any of the files inside the folder
dwains-theme, because future updates of this theme may not work. If you want to extend or add own views/pages to this theme use addons