Jira Cloud App Logo

[clouless]

Hi Atlassian and Community,

We have recently launched our first Cloud app and are wondering about the strange changeFillColor filter that is overlaying the actual logo and making it very dark.

Here is what I am talking about.
It looks like this:

But it should look like this:

Other apps from other vendors are also affected.

Why is there this changeFillColor filter in place? When the filter would not be there, all would be fine.

Here is how the HTML looks:

<svg viewBox="0 0 20 20">
   <defs>
      <filter id="changeFillColor">
         <feColorMatrix type="matrix" values="0.08, 0, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 0,0.2, 0, 0, 0, 0, 0, 1, 0"></feColorMatrix>
      </filter>
   </defs>
   <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://myapp.foo/something-app-32x32.svg" width="20" height="20" x="0" y="0" filter="url(#changeFillColor)"></image>
</svg>

@atlassian can you please explain why it is done? I would really like to just display my logo it was meant to look, thanks

thanks,
Bernhard

[ajay]

@clouless

ud app and are wondering about the strange changeFillColor filter that is overlaying the actual logo and making it very dark.

Yes … I have observed the filter being applied in DarkMode and its really creating issue with the App logo since there is no option to change the logo for Dark mode

Refer- Announcing Confluence Cloud Theming Preview for Developer Canary Program - #3 by AlexWhite

[clouless]

Thanks for that info.
Now it makes somewhat sense

But I see the filter applied in light mode too. Also for other app logos.
I would love to hear from Atlassin about it.

[clouless]

@dmorrow hi, could you please ask someone from development to have a look, thanks

[dmorrow]

Hi @clouless ,

This seems like a bug to me so perhaps you could raise a support request. Sorry if this appears to be a run around, but I think our support team are best placed to drive this issue to a suitable resolution.

Regards,
Dugald

[clouless]

Hi Dugald,
Thanks for the assessment, I opened ECOHELP-29952 and will report back here
Cheers,
Bernhard

[clouless]

Just want to let everyone know, Atlassian deployed a bugfix and now everything looks normal

[Starware]

Hi @clouless ,
Our Forge app icon is an svg and it is still displayed as dark in the dark mode. Should the mentioned changeFillColor filter make it lighter for the dark mode?

[clouless]

Hi starware, I do not know what the filter should do actually. It just made our app logos darker in light mode. Maybe it was intended to do so only in dark mode.

Maybe Atlassian could give an answer?

[hitsthings]

Just wanted to confirm this seems either still borked, or re-borked, specifically in that Apps dropdown. The same color matrix is applied in both light and dark modes:

<feColorMatrix type="matrix" values="0.08, 0, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 0,0.2, 0, 0, 0, 0, 0, 1, 0"></feColorMatrix>

If you’re going to do this, it should be lightened in dark mode too - perhaps still using an feColorMatrix, but with those diagonals larger than 1.

Multiple apps in my instance currently have illegible icons in that menu in dark mode.

@clouless - when you say it was fixed, do you know in what way it was fixed? I’m wondering if I need to open a support case too for the above…

[clouless]

The fix was rolled back and Atlassian told me to use a PNG instead of an SVG and now it works. Since the filter does not work correctly on SVGs. That is good enough for me

[denizoguz]

Hi,
Could you please upload a sample png file? Because I have tried PNG (transparent background and black foreground) and it is displayed as black icon on black background.

[clouless]

So I basically use a round blue background and the logo looks the same on DARK and LIGHT mode and that is fine with me. I do not really know what the filter is supposed to do.

My findings were:

• SVG => makes it a lot darker even in light mode
• PNG => does nothing, regardless the mode

… and the more this issue goes on I do think Atlassian does not really know what’s up with it either

[denizoguz]

Thanks a lot. This is really a good workaround and should be accepted solution considering there is no real solution.