I had my fun with transparency for quite some time now. Until 2023.4.0b0 in this case.
First some material I use right now: GitHub - dreimer1986/yourname_card_mod: Home Assistant theme - A dark, electric blue theme that reminds the movie Your Name.
This is a modified yourname theme for use with CardMod and Vilhelm’s Animated Backgrounds (with some 2023.4.0 fixes I hacked together here WARNING: 2023.4.0b0 or newer break Animated Background · Issue #56 · Villhellm/lovelace-animated-background · GitHub)
- I am open for any kind of suggestion of course. (But better over there on Github as I don’t wanna hijack this thread)
- Look closely on the animated pics I added. You can see the sidebar is a mixture of darker transparent buttons and a less transparent rest. This is the goal I want back…
As CardMod seems to have broken down quite a bit, I decided to get some stuff fixed with a style JS: https://raw.githubusercontent.com/dreimer1986/yourname_card_mod/master/www/styles.js
Header and Lovelace background are fine again, but sidebar is still funny. I got a suggestion from BramKragten how to fix it and it indeed does SOMETHING, just not what I want. The fix in the script casues one layer to vanish as the whole sidebar gets lighter. But there is one layer I cannot find and it is NOT transparent. This can be seen fine when the site loads up after Cache wipe. Sidebar has some dark color and the rest is way lighter. Sadly I cannot make a pic @ home as my PC is too fast, I saw this at work… Thus the current result is:
Here for comparison the same without setProperty("–mdc-theme-surface", “transparent”)
It’s darker.
Now to the final part… HELP!!! What did I miss in all my mess? Why is this thing not transparent? What layer did CardMod make vanish here and now fails to do?