First customization

Hi :slight_smile:

Being new to Home Assistant, this is my first attempt at customizing the UI.

Right now I only have one big problem… The …

The top of the interface is made up of to elements: and , which share the same style-definition.
When I set the background color, to include an alpha value, this is my result:

The top half is darker than the rest, because there are to layers with the same color and alpha value.

To avoid that problem I use this js:
setTimeout(function () {
try {
const root = document.querySelector(‘home-assistant’).shadowRoot;
const main = root.querySelector(‘home-assistant-main’).shadowRoot;
const drawer_layout = main.querySelector(‘app-drawer-layout’);
const pages = drawer_layout.querySelector(‘partial-panel-resolver’).shadowRoot;
const lovelace = pages.querySelector(‘ha-panel-lovelace’).shadowRoot;
const huiroot = lovelace.querySelector(‘hui-root’).shadowRoot;
const toolbar = huiroot.querySelector(‘app-toolbar’); = ‘transparent’;
catch (e) {
}, 10);

It kind of solves the problem, but at soon as I access the Config Editor, it resets the style, and I have to reload the page, for my script to rerun.

A more populated UI image:


This is pretty cool! Have you published any details on how to replicate this somewhere?