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

Sidebar Instant App Title Not showing in Light Mode

KaraUtter

In the Sidebar Instant App, the title, social media and pdf icons that are all located in the header disappear in light mode because their colors are also white and there is no option to change the color of the title like there is in the Nearby Instant App. Light mode is easier to read for users with poor vision, and it is important to be able to create apps with a visible title. Aside from this bug needing to be fixed, can we please have the option to change the color of the title in all instant apps, regardless of mode?

Sidebar no Title Color Options.png

image001.jpg

AnthonyJonesRSK_0-1719480878530.png

Encuentra más publicaciones etiquetadas con

Accepted answers

khutchins

I ran a quick test and if I apply the light theme to the sidebar app the social sharing icons appear in gray font - here's my test app:

Do you have a link to your app so I can take a look and see if there are cases when the theming isn't applied correctly?

https://www.arcgis.com/apps/instant/sidebar/index.html?theme=light

Here is some sample css you can use in the custom css section to change the background color, text color and icon color for the header area. Paste it into your app config to see the colors change then you can modify the colors to fit your desired color scheme.

.site-header{background:#3f51b5;color:#fff;} .esri-share__share-item-container button[theme=light] svg > path{fill:#8bc34a;}

All comments

khutchins

Yes shared theme is on by default so if your organization has a shared theme defined it will be used. Glad you were able to get the custom css working for your app.

KaraUtter

That's interesting. There is a button called, "shared theme" that must be applied to this app by default (I didn't turn it on). When I turn that button off, the title and social icons will appear in grey. When it is on then nothing appears. What is the "Shared Theme"? Is that for when you have a theme set for your organization or something?

Thank you for the CSS - I have used that and altered to fit my needs: https://valleycounty.maps.arcgis.com/apps/instant/sidebar/index.html?appid=283a3b5eb6f740539e623169e75d553a

khutchins

I ran a quick test and if I apply the light theme to the sidebar app the social sharing icons appear in gray font - here's my test app:

Do you have a link to your app so I can take a look and see if there are cases when the theming isn't applied correctly?

https://www.arcgis.com/apps/instant/sidebar/index.html?theme=light

.site-header{background:#3f51b5;color:#fff;} .esri-share__share-item-container button[theme=light] svg > path{fill:#8bc34a;}

KaraUtter

That would be great, Kelly, examples would be helpful. I will also look into organizational shared themes.

khutchins

we are going to add additional theming options soon. In the meantime you can modify the title area by defining an organization shared theme then choosing to apply it to the app. Another option is to use the custom css option in the theme section to define styles for the title area. I can send you an example of these styles when I’m back at my desk if you’d like.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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