How to Get Started with Home Assistant Themes!

hey folks welcome back to tech tech and more tech i'm carlo and in this video i'm gonna go over home assistant dashboards [Music] as always if you prefer a more detailed written version head on over to techtechandmoretech.com or check the link in the description just below that like button so home assistant dashboard is kind of the first thing you see when you log into a home assistant instance so if you already have that set up or if you want to know how to set up home assistant to begin with pause this video check the links in the description there's videos there on how to get everything set up so in this video it's going to be kind of a step after you've already got everything set up all your different integrations all your different devices automations whatever this is going to be all about the lovelace dashboard that's what the sort of front page the control page of home assistant is called lovelace it's going to be all about customizing it how to install themes how to install custom cards that give you even more functionality than what is there to begin with and hopefully this will make it pretty easy to set up just the way you like it so this is going to be mainly done on the computer so let's jump into that now okay so to get started with themes pretty much they're all going to require hacks which is home assistant community store so we're going to go ahead and download that first get it installed as well if you need help with it you can always go to hacks.xyz and you can follow along the installation guide there which is kind of what we're going to do but some parts aren't make it clear so hence the video so the first thing we are going to do is we need to have a particular add-on installed this one terminal and ssh if you don't have that go to the add-on store and just scroll down until you see it tap on it get it installed there's pretty much nothing to it you just have to get it installed and start it and that's that's pretty much it for that part of it you will then open up the web ui so for hacks you're also gonna need a github account so if you don't already have one just go on over to github.com and or github.org.com and create a new account it's obviously free and very straightforward but you will need it eventually in order to authenticate it as you will see so if we go back to our terminal and ssh if we open up that web ui we're greeted with this screen so what we're going to do is if we go to the hacks and then installation there's this little nice little snippet of code that we're going to copy paste and hit enter so it's very quick it's very easy very small and then we're gonna go ahead and do a quick restart okay it looks like we're we have restarted so the next part is then going to be to configure it so the way we do that is when we go back to configuration and integrations so in order to afford it to show up we need to clear our browser cache so if you're using safari you're going to go to your preferences um you're going to go to advanced i believe show developer and menu and then develop we're going to empty caches and now hopefully hacks should show up there we go so yeah so if you could you have to empty that cache if you're using chrome do it however chrome does it if you're using safari get that develop page in empty caches then you type in hacks it'll show up if you don't feel comfortable with all this one thing i'd recommend actually is go to supervisor go to snapshots and create a full snapshot that's basically a backup of home assistant create a full one download it so when it's done you can actually click on download snapshot that way if anything goes wrong during this process you can always just basically uh start from scratch restore that and everything will be back to just the way it was hhcs install check all these boxes and submit okay now we're going to go to github so we're going to click on this link to open up our github account sign in and then it's going to ask us to type in this code it's going to be unique for everyone so just type in whatever it shows up for you and authorize hacks you're all set this should now realize that and it's going to ask you where do you want to set it up awesome i always put all the sort of hubs and everything in my fake control room and hit finish and now on the left-hand side of your screen you will see hacks and this is basically where you can add in crazy fun things so now if for example if you type in home assistant themes and go to that second link so if you type in home assistant themes and you go to the latest theme topics this is the community forum and you can basically look at all the cool different themes that people have created you can sort by views to get the ones that are the biggest share obviously it's going to be people that have shared everything midnight theme a lot of sort of dark mode stuff going on so one of the cool ones that i like is the ios because i think the way that ios handles smart home stuff is pretty nice so if we go to integrate if we go to front end actually i'm sorry front end if we type in ios we've got a couple different dark darkmoon ones i like this one that is dark and light mode i've already got it installed from before but the information once you install it it'll be there and then if you get on information it'll tell you how to set it up and the few things you need so that's going to be our next step so if you've got that installed go ahead and then scroll down and copy paste this code so we're going to go into our file editor configuration.yaml at the very top here we're going to paste this in the front end basically look for themes here very straightforward and save okay so we put in this code we've got to get rid of the hashtag your configuration and just have it like this front end and then themes and then save and then if you restart pass it should then be able to work so let's see and it has started so now i'm pretty sure if everything went well if you click on your profile in the bottom left corner the very bottom you should now have the option about theme and you can choose which theme you want and yes i can i've got 28 different ios dark mode themes so i'm going to go dark mode let's try dark blue and boom if i go to overview now i've got the sort of dark blue ios looking theme okay so now that we have our themes installed i'm going to go over a couple of my favorite themes because there's a lot of them out there and what you'll find a lot of them are just sort of contrast colors and stuff that you know maybe maybe you like that maybe you don't but i just want to show some of the ones that i think are more interesting and take a little bit further than just changing the contrasting color so if we go to hacks and we go to front end that's where our themes are going to be obviously i like the ios one uh so we've got a couple of different ones the ios dark mode by juan m tech great youtube channel a great source for home assistant stuff that one's really good you've got your dark modes etc so i quite like the ios dark mode and that's the one you're looking at right now actually uh vintage is pretty cool vintage if you really want to go completely different you can install vintage and it's going to give it a very sort of like retro 50s vibe so if we go down to our profile we want to check out what vintage looks like boom it looks crazy very very different very contrasting colors very very different very noticeable probably not something i would use all the time but kudos to the developer because it is pretty cool and it's very different next up is noctis noctis is probably one of my favorite ones if we go ahead and install it real quick and apply it very simple but still just sort of elegant good colors nothing too special about it but just like a nice theme then we've got google this one you got your light theme and your dark key dark theme i prefer dark so if we can install it it kind of has the same sort of vibes as a google home hub so if you happen to use those you probably know what it looks like it's a google dark theme and again they all look pretty similar at the end of the day there's not a lot of difference between them it's going to come down to a lot of particular cards that might might make it look different than others but as you can tell and again they're all mainly color related there's a lot of actual like changes but there can be and that's what we're going to look at right now and that is cards so cards refer to these physical sort of like the borders and what is inside them uh for for the most part everything you're looking at right now is just the entities card where you can just add your different entities and it'll basically just give you a toggle so you can turn them on or off very straightforward you can tap on it to get different brightnesses different colors etc nothing particularly special about it but there are some cooler ones so you've got your weather that's a nice little forecast people have like radars and stuff integrated if you use dark sky you can integrate dark sky into things so the first one is going to be the rgb light card that is this right here where basically we get to just click on our favorite colors for a particular light or like a group of lights if you have it set up as like a scene and just makes it very easy to change things about so i'm going to go and go and edit it so you can see what it looks like basically you have you have to mess with the code a little bit but essentially all you're doing is taking the entity itself so for me it's just bedroom light for now but you could put a group of lights if you wanted and then you can just have all these different favorites and you can customize exactly which one the downside is it has to be rgb values or hs values you can just be like blue or green or red etc that's the only downside but again if you just go to if you just google rgb color wheel picker you can then very easily so you can easily kind of just click around figure out what color you want it'll tell you the rgb values and then you just type them in here and then you can quickly and easily jump around your transition is basically how quickly it transitions i usually just leave it at one and that's pretty nice i will leave links to how to get all this installed all of these are actually going to be installed through hacks so i'll show that in a second as well so if you just go to hacks go to the front end and if you search rgb light card boom there it is you just click on install and you get the light card you might have to refresh the page or reload your cache for the browser for it to work sometimes you have to uh reload it for it to show up but very straightforward the next one that i really like is is the sliders so this is the slider one what's nice about this is you can very easily obviously just choose the brightness of something and it doesn't have to just be brightness you can do temperature you can do volume if it's like a media or something like that i prefer just the brightness of whatever lights i have and you can again customize it so you very easy you choose what entity you want to show up under and now you can very easily slide around the brightness of your lights so obviously if these are dimmable that's what you're going to want if they're not then you're not going to do it especially if you use something like an ipad or an iphone or whatever touchscreen device to adjust to like interface with your home assistant then it's nice that you can do it very easily versus tapping on this and then sliding it around next up is the simple thermostat my ecobee is acting up right now but just a very simple easy way of controlling your thermostat so you got your temperature where you got to set to you can turn it off heat cool either or and that's it very straightforward very simple i like it and the last one is just this mini is this simple graph useful if you want to track any sort of data in a very sort of simple way without it being too in your face or anything i just have the temperatures from my different sensors just a simple elegant way you can also track also all sorts of stuff anything that's a sensor you can track so if you want to check the battery life of whatever device you can do that if you want to track your internet usage packets lost stuff like that you can do that as well uh very simple but pretty useful one thing you'll notice a lot of people do is have these sort of like squares and for the longest time i did not know how people did it because it wasn't very straightforward but the way you get it is actually by using the grid card configuration so if you go to add card you scroll down a little until you find grid the grid card is basically what allows you to have these square cards so if you do a button that's basically how you get it so you get a whole bunch of buttons and that's how you get them to be nice and square and very looks looks very sort of ios-esque and very sort of similar to that on mobile devices because it's very easy to click on them and again you can do any sort of device you want you can do scenes you can do automations if you really wanted to to get everything working this is great because you can make it smaller if you edit this to have more columns you have five columns and now it's much smaller so you can pack more in there it's a very efficient way of getting a lot of stuff in there and have it look really nice as well the big cards or cards that anything that uses the icon so here we got light bulbs here we got this sort of like uh ceiling light whenever you go to edit it it's quite frustrating that there's no drop down or anything it's just haas or hass dot or colon and then light i don't know these are called material design icons if you search material design icons.com you can then see every single one and i imagine this is where it's all gathered from and there's a ton of them so the easiest way to do it if you type in light for example you can now see all the different ones that are light so here we've got light strip light switch light bulb all sorts of things groups not groups uh shaded outlines whatever but all of these are are accessible within helm assistant so for example i've got the light strip variant here we go light switch let's do that so light switch cool so i'm going to go to my guest bedroom this one is just like a as i guess what the default is is for light switch is a sort of lightning arc um i don't care if that doesn't really make sense so instead i'm going to go and hit edit and here i'm going to type on haas light dash switch now it looks like a light switch i save it now i've got a light switch here so yeah so all of these device icons that are available are going to be in materialdesignicons.com and there you have it i mean like i said it's all going to be pretty straightforward pretty simple but it does make it that much a little bit more customizable and there you have it how to install themes all the different sort of themes that you can get a couple of my favorites all the different add-on cards that i personally like that i think are really cool that add a lot of functionality to the home assistant dashboard and hopefully they'll give you some ideas on how you can customize your own home assistant dashboard so it fits your needs and your sort of household uh perfectly as always links to everything are down in the description if you like the video be sure to like and subscribe button for plenty more videos to come if you have any questions or comments please leave them down below and i will get to them as best i can and until next time see ya

Channel: Tech Tech & More Tech

Views: 11,925

Rating: 4.9475985 out of 5

Keywords: home assistant, hassio, lovelace, home automation, smart home, home assistant how to, frontend, developer, home assistant setup, dashboard, lovelace dashboard, incredible lovelace dashboard, easy lovelace dashboard, lovelace tutorial, dashboard tutorial, tutorial, grid card, clean dashboard, tile dashboard, home automation dashboard, smart home dashboard, smart home ui, ui, ux

Id: -KvyY2DK8Vc

Length: 17min 23sec (1043 seconds)

Published: Sun Mar 21 2021