I’ve recently started exploring the world of smart home automation and have been absolutely thrilled with the possibilities it offers. One area I’ve been particularly interested in is customizing the look and feel of my Home Assistant setup. While there are some fantastic pre-made themes available, I wanted something that truly reflected my personal style.
After spending quite a bit of time researching and experimenting, I stumbled upon the Bluenight theme. It was almost perfect for my needs, but there was one thing that bothered me: the icons didn’t change color when turned on, and they didn’t follow the brightness levels like they do in the default theme. This was especially noticeable for lights and binary sensors.
Determined to fix this, I dove into the theme’s code and started tweaking the parameters. I discovered that by adjusting the base-hue and base-sat values, I could control the overall color scheme. To make the icons change color when active, I had to modify the paper-item-icon-color and paper-item-icon-active-color properties.
Here’s a simplified version of what I did:
yaml
MyVariables
base-hue: ‘220’
base-sat: ‘5%’
Icon Colors
paper-item-icon-color: ‘hsl(var(–huesat) 40%)’
paper-item-icon-active-color: ‘hsl(var(–huesat) 90%)’
This change ensured that when a light or sensor is on, its icon adopts a vibrant color that stands out against the darker theme. When off, it maintains the original Bluenight aesthetic.
The process was a bit trial and error, but it taught me a lot about how themes work in Home Assistant. I’m now confident enough to tweak other aspects of my setup! If anyone else is looking to customize their theme, I highly recommend starting with the default themes and gradually experimenting with the parameters. It’s a fantastic way to make your smart home truly your own.
If you have any questions or tips about theming, feel free to share them below! I’d love to hear how others have personalized their setups.