Instant Apps Basic Template - Share button color contrast

[CatherineWendland]

In Instant Apps, I've noticed depending on the template you choose, your color theme is applied differently. 

Our Parks department uses the "basic" template quite a bit and even though we have chosen accessible colors, the share button in the top right corner is black against our blue header. It seems like there isn't a way to change this.

When I use the Sidebar template with the same theme/color scheme, this isn't a problem.

I'm hoping this is an easy/quick fix that Esri could implement - @KristaMcPherson 

Example - Basic template with our City of Seattle shared theme:

Seattle Parks Pickleball Facilities

Sidebar template with same "Shared Theme" to choose the colors:

[KellyHutchins · Accepted solution]

Good morning.  Looks like this is an issue with dark headers and the light theme in the Basic app. We'll get this addressed in the next release of Online. In the meantime you can add custom css in the app configuration process to change the color. Here is an example that sets it to white. You can find the custom css option in the Theme & Layout section of the app configuration. 

instant-apps-social-share {
  --instant-apps-social-share-popover-button-icon-color: #fff;
}

[CatherineWendland]

@KellyHutchins Hmm adding that CSS did not fix it for me.

I did try changing to Dark mode with our color scheme and that changed the button, but now the map tool buttons are dark. So that's just a design choice. 
I'd still like to see that share button in the header change depending on your color theme like it does in the other templates.

[KellyHutchins]

After you make the update to css you'll have to publish and launch the app to see the change. Let me know if that doesn't work?

[CatherineWendland]

OH. 🙃 Yes, that worked. After adding the CSS, publishing, then opening it does enable the CSS and show the share button as white. I was expecting the change to show while I was still in the editor.

Thank you!!

[CatherineWendland]

@KellyHutchins - when you say the fix will be in the next AGOL update, do you mean the one in a couple weeks? or the one after that?

[KellyHutchins]

The one in a couple of weeks. We already had it fixed in our development environment.