Hi 
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’);
toolbar.style.backgroundColor = ‘transparent’;
}
catch (e) {
console.log(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:
