feat: toolbar, access toolbar background element via css

[samuelrebuelta]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

I need to apply a transition on the background of ion-toolbar, and there is currently no way to access the toolbar-background class.

Describe the Use Case

be able to apply styles as transitions in the background-color

Describe Preferred Solution

Adding a shadow part.

Describe Alternatives

No response

Related Code

No response

Additional Information

No response

[zolakt]

Does anyone have a workaround for this? The only one I've found is this:

ion-toolbar {
    --background: none;
    background: red;
    transition: background 2s;
}

ion-toolbar:hover {
    background: green;
}

However, that it is not a good one. With this, when you transition to another page, the header color remains visible until the transition is complete. Apart from using this in combination with some crazy JS what would make this change only before animation, and remove it as soon as it's done, I haven't seen any other workarounds

[ghenry22]

Also looking to do the exact same thing, I have dynamic colors for background and toolbar-background on detail views. This works fine but I want to set a transition so the color changes smoothly rather than a hard change.

Need to be able to set transition values on toolbar-background class for this to work. I can do this quickly with dev tools and it works perfectly, just no way to target the properties of toolbar-background in css that I can see.