nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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:

Find more posts tagged with

Accepted answers

khutchins

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;
}

All comments

khutchins

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

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?

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!!

khutchins

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

@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.

khutchins

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.