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? 

[KellyHutchins]

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. 

[KaraUtter]

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

[KellyHutchins · Accepted solution]

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

[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=283a3b5eb6f740539e623169e...

[KellyHutchins]

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.