Using frontend on Hass.io
In the previous post, I’ve covered the setup of the Hass.io system. Out of the box, the panel is no eye candy I would way. But there’s hope my friend, and I will tell you a thing or two to get it on its feet. We are now going through how to set up themes and layouts.
Note
Notice that Theme and Layout are two different things in this article.
But I’m covering both subjects, lucky you!
Theme
If you are like me and have some vampire blood in your veins, then you probably want to stick to a dark theme I guess. by all means, you can also go totally white, I wouldn’t mind, just don’t show it to me, unless you have made magic 🙂
Setting up required files
The first thing we can start with is to edit our configuration.yaml file and add a new file to our system. In this file, scroll until you find «frontend» then add this:
configuration.yaml
# Enables the frontend
frontend:
themes: !include themes.yamlWe are now including the file themes.yaml instead of pasting in our theme in configuration.yaml since its big enough as it is. Just to make things cleaner and easier to get more overview of our installation.
So the next step is then to create themes.yaml in the config directory.
As the screenshots above in using dark and orange as a default theme now (kind of like this one)
And this is the code I used in themes.yaml:
config/themes.yaml
darkorange:
primary-color: "#ff9800"
light-primary-color: "#ffc947"
dark-primary-color: "#c66900"
text-primary-color: "#ffffff"
primary-background-color: "#37464f"
sidebar-text_-_background: "#62717b"
paper-card-background-color: "#263137"
paper-card-header-color: "var(--text-primary-color)"
secondary-background-color: "var(--primary-background-color)"
primary-text-color: "var(--text-primary-color)"
secondary-text-color: "var(--primary-color)"
paper-listbox-background-color: "var(--sidebar-text_-_background)"
paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
paper-toggle-button-checked-button-color: "var(--dark-primary-color)"
paper-toggle-button-checked-bar-color: "var(--dark-primary-color)"
paper-slider-knob-color: "var(--primary-color)"
paper-slider-knob-start-color: "var(--primary-color)"
paper-slider-pin-color: "var(--primary-color)"
paper-slider-active-color: "var(--primary-color)"
paper-slider-secondary-color: "var(--light-primary-color)"
paper-slider-container-color: "var(--sidebar-text_-_background)"
paper-progress-secondary-color: "var(--sidebar-text_-_background)"
paper-item-selected_-_background-color: "var(--primary-color)"
paper-item-icon_-_color: "var(--text-primary-color)"
paper-item-icon-color: "var(--sidebar-text_-_background)"
paper-item-icon-active-color: "var(--primary-color)"
paper-grey-50: "var(--sidebar-text_-_background)"
paper-grey-200: "var(--primary-background-color)"
label-badge-background-color: "var(--sidebar-text_-_background)"
label-badge-text-color: "var(--text-primary-color)"
label-badge-red: "var(--primary-color)"
label-badge-blue: "var(--light-primary-color)"
label-badge-green: "var(--dark-primary-color)"
label-badge-yellow: "var(--text-primary-color)"
label-badge-grey: "var(--paper-grey-500)"
table-row-background-color: "var(--paper-card-background-color)"
table-row-alternative-background-color: "var(--sidebar-text_-_background)"But nothing has happened yet because we haven’t set the new theme for our profile.
To do this we need to go to our profile page (the icon in the sidebar on the top right) and select under Themes, then you will find «darkorange» or whatever you called it.
Note
You can also have multiple themes in this file, just make sure indentation is properly. And you can also change the hex code at the top of the file to change colors to what you prefer. Also, When applying a theme, this will only affect the current user that you’re logged in with.
If you have multiple users, you need to change for every user.
Everything is dark and orange now,
but still looks like crap?
Okay now were bringing up the big guns I guess, the layout part. The first thing we can do is to check if Lovelace is set to yaml mode. Go to the configuration file again (configuration.yaml) and look after # Lovelace Then add this if not already in place.
(Not sure if it’s there by default, but nice to doublecheck I guess).
configuration.yaml
# Lovelace
lovelace:
mode: yaml
Layout
Ok so now we can start creating our new frontend layout as to how we want it. In my setup, I have created multiple tabs for different rooms in my little castle and one main tab that I’m using for locking up at night mostly.
We need to create a new file called ui-lovelace.yaml and save this under the config directory. We can start slowly by adding this to the file.
ui-lovelace.yaml
views:
- !include lovelace/page1.yaml
- !include lovelace/page2.yamlNote
In ui-lovelace.yaml we can add all our tabs in this file, but as mentioned before, I like to separate every tab into different files to get a better overview.
And if you only gonna use one frontend page, then just include the one file, and the tabs on top will disappear.
So lets say you stick to page1.yaml and page2.yaml, then we need to create theese files aswell. Those files are we adding under /config/lovelace
so /config/lovelace/page1.yaml
and /config/lovelace/page2.yaml
Yes the files are now added but nothing shows? Thats right, we haven’t added any content to those files yet to define name or icon to the tabs so thats why they are not showing.
To do that we need to add this as a minimum requirement to make the tabs show:
page1.yaml
title: Page 1
icon: mdi:home-outline
panel: true
path: page1In short,
title is the name of the page were creating.
icon is the icon thats appearing in the tab.
– You can find all available icons here
panel is the sidebar, if you want to hide it on certain pages.
(havent seen any reason for it yet since its not opened by default)
path is the url for the tab.
The base structure is now set, what now?
Now we can start implementing Lovelace cards, Everything from lightbulb switches, weathercasts, and so on. A good practice is to think about how your layout is gonna be before your implementing your layout (just like tattoos kind of I guess..) because this is NOT drag and drop solution where you can play along and expect it to look perfect on the first shot.
Note
In this article, I just cover on how the default lovelace cards are working. There will be another one for custom cards. This is just to get an understanding of how it works.
We can start by taking page1.yaml now and assuming that you have atleast two light bulbs to create two picture cards in a horizontal view and add lights to each cards like this:
To create this we need to setup page1.yaml like this:
page1.yaml
title: Page 1
icon: mdi:home-outline
panel: true
path: page1
cards:
– type: horizontal-stack
cards:
– type: picture-entity
image: /local/your-image.png
entity: light.ceiling_lights
– type: picture-entity
image: /local/your-image.png
entity: light.bed_lightNote
Note that the image is written as /local/your-image.png
This images shall be placed under config/www/your-image.png which is kindof confusing, but thats how it is.
You probably noticed that its cards inside cards, this is what I was referring to earlier that you may need to think twice before implementing because you can, for example, have one horizontal-stack and inside this, you’re having 2 vertical stacks with cards again. whatever suits your needs.
The default lovelace horizontal and vertical cards also have some limitations and are not optimized for mobile what so ever. But this is absolutely a facelift from the out of the box default panel.
To get an optimized view for desktop, tablet, and mobile we need to use a custom layout card, and that I will cover some other time.
