Problem overriding bg-color variable in theme .yaml file

Configuration Frontend
1

Hello everyone.

I think I tried everything and couldn’t get this to work, so I’m pleading to the higher authority of the community for guidance. :pray:

Here is the problem:

I’m customising a theme .yaml file (took one of catppuccin themes as a baseline) and while mostly everything I change works as expected, for some reason when trying to override the “bg-color” property, the new value I define just doesn’t go thought and the default rule is applied.

Screenshot 2023-05-27 at 16.31.06
Screenshot 2023-05-27 at 16.31.061594×1894 219 KB

Let’s say I would like to change the opacity over there, but no matter how I define it, it just gets ignored. I would expect that variable to change to 0.3 opacity when defined in the custom theme .yaml as below:

Screenshot 2023-05-27 at 16.35.12
Screenshot 2023-05-27 at 16.35.12846×336 42.7 KB

2

This is because a template will set the bg-color variable at the host level. The mushroom card is overriding it within its shadow root. You can see this at below link for the mushroom-input-number tag.

mushroom input number

You would have to use card-mod to override this as afaik a template will not.