I would like to theme the UI a bit more than currently possible. That’s quite hard to do, because HA uses web components which are encapsulated and can’t be styled from the outside (anymore). I currently use a hacky JS solution but I’d rather like to add a few CSS variables to the mix:
Unfortunatly, (as far as I understand) this forces you set a style for every single card separately - that’s exactly the kind of thing I want to avoid because It creates a terrifying mess in your config file.
My proposal would just extend the styling possibilities that are already there and would therefore well integrate with the existing theme engine.
I’m using the hacky JS myself (which doesn’t work well on the mobile app) and am so frustrated with the lovelace theming. I’d see many more CSS variables to get better styling options.
Please let us know if your PR are merged and if you find any better solution!
Thanks
Well, I’m considering forking the home-assistant-polymer repo to add more design flexibility. Let me know if you ever do it first or I’ll post my updates here.
Been thinking about this but I’m quite unsure if it’s worth the work. Currently I use a JS script to inject the custom properties so that I can use the integrated theming functionality. If I find I way to listen to dom changes (there is MutationObserver but it can’t be used with nested shadow dom without attaching it to every shadowRoot) this could be a viable solution.
Hi! I’m using the homeassistant app, which is really cool. I also use a script to inject JS, but from time to time my theme is broken (when the app was open in background, most of the time)
If you find any clean way to make these changes with JS, please let me know, and I’ll try the fork solution. I just plan to make some css variable and property changes, so updating from time to time to the officiel version shouldn’t be so hard.
