I’m trying to dynamically change the style of some items in my app and seem to have hit a dead end in my efforts.
Use case:
I receive several colours as hex strings from the server that I need to apply to the nav bar, content background, text etc. These colours can be anything, clients are able to set them to whatever branding they want. I need to be able to apply these hex colours upon receiving them. My main issue is styling the nav bar, since the nav bar colour is actually set in the toolbar inside the nav bar.
What I’ve tried/looked at so far:
- Using [color] on the nav bar to bind the colour - This seems to be usable only with colours set as variables, not dynamic enough for my needs
- Using [ngStyle] - This would only apply to the nav bar and not to the toolbar inside it, which would result in nothing changing visibly
- Using [ngClass] - This would only work with pre-defined classes, not dynamic enough
- Inserting a
<style [innerHtml]="styleString">in the page - this would be ideal since it would allow me to override any classes such as.toolbar-backgroundwith any colours I want. The problem with this is that any<style>tag doesn’t get rendered in the page.
I’m all out of ideas so I’m looking for any suggestions anyone might have.
Edit: This same problem applies to the content background colour, since the colour needs to be set on the div.scroll-content, not the ion-content