A different take on designing a Lovelace UI

Share your Projects!
4798 
// resources:
//   - url: '/local/sidebar.js?v=2'
//     type: module

// test red background
const body = document.querySelector("body");
body.style.backgroundColor = "red";

// transparent sidebar
const main = document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main");
const haDrawer = main?.shadowRoot.querySelector("ha-drawer");
const haSidebar = main?.shadowRoot.querySelector("ha-drawer > ha-sidebar");

haDrawer.style.setProperty("--mdc-theme-surface", "transparent");
haSidebar.style.backgroundColor = "transparent";