Provide two different icons for general pages depending on background

Hi all,

when adding new general pages in Connect Apps, one can define an “icon” → “url” which is then shown. By default these icons are white, and the background of the side menu is blue. If the user changes that color scheme and the background of the side menu is a bright color, the icons turn black.

However, the icon defined by the App stays white, and I see no option to provide a dark/light version of the icons. (The icon is svg)

Is there an option to provide custom menu icons in 2 different colors?

Thanks

2 Likes

Looks like a request related to this is open for Jira… https://jira.atlassian.com/browse/JRACLOUD-68147 (please upvote!)

@LukasGotter This might not be an issue with the new top navigation that is currently rolling out. It’s out to about 25% of customers at the moment.

See Community post for more details on the new nav.

Hi Ralf! @rwhitbeck

Thanks for your answer. Is the background color of the new top navigation always white/bright on dark text? - It does not sound like that reading these docs here https://confluence.atlassian.com/confcloud/new-confluence-navigation-978220550.html.

  • No changes to custom background color.
  • Text color was removed from the custom color scheme. Text color is automatically chosen for you in order to optimize legibility. For example, if your background color is white, the text color chosen provides the greatest contrast with some shade of dark grey; if you background is black or blue, the text color is some shade of white.

Question is, what about the icons?

hey there @LukasGotter, The icons will match the text color, you can see some examples of it here Atlaskit Theming Example

Hey @tm1, do you mean that this applies to 3rd party App icons as well? Currently providing an svg (with fill="currentcolor") seems not to work. Will this or a similar approach work in the new menu?

Hi @tm1, could you clarify? Will 2 different menu icons for 3rd Party Cloud Apps work with the new menu top navigation? (The native icon SVGs seem to use this attribute to match the appropriate color fill="currentcolor", however that does not get picked up by the current navigation for the 3rd party icons.) Thanks.

1 Like