White backgrounds for user and organization images

The beta of the dark mode looks really good, but at this point I would like to ask whether it is possible to also use a dark layer on images with an alpha background. The current white is very annoying to the eyes.

image

9 Likes

Thanks for cross-posting here @JosunLP! This is helpful feedback for us to consider how we should address transparent pngs org avatars. During internal testing leading up to today we found that without the white background, dark icons (like the GitHub logo) with alpha backgrounds become almost invisible without the white. But I’ve shared this feedback with the team and we will take another look at this!

2 Likes

This account’s image uses a transparent background, which doesn’t show up properly on the user profile page https://github.com/eks-distro-bot

The PR view does add white to the background: https://github.com/aws/eks-distro-prow-jobs/pull/35.

1 Like

Thanks for sharing this feedback @micahhausler! We were going back and forth on whether to add white backgrounds to user and org avatars ahead of the beta launch, but will be looking to complete making them all consistent soon. Adding this example to our backlog though!

1 Like

Please fix the icon background color, i changed image to png but the background still white

1 Like

@LO11D would you mind sharing a screenshot of your org icon so we can better understand how this impacts you?
We have added a white background (albeit not 100% consistently yet) to user and org icons so that any black or dark logo or other images with alpha backgrounds are legible in dark mode.

I think ideally this would be done dynamically based on contrast. (If that is even feasible.) At minimum, having the the option to flag my profile image as keeping a clear background would be ideal for me. I love dark mode, but I realize not everyone does so I’d like my image to look best in both themes. Clear backgrounds are the best way to accomplish this as a user who doesn’t control the CSS. (For everyone else anyway.)

3 Likes

Thanks for your response @joe-sharp! Though we have saved the investigation of backgrounds for images in theme contexts for after the initial beta release, we have thought about the possibility of handling this dynamically. I am still impressed by the work our team did to get our labels to dynamically work in dark mode with better contrast ratios than our light mode. But labels aren’t tethered to the realities of personal preferences or brand guidelines so it’s hard to know whether or not this is in fact feasible for images :thinking:

1 Like

4 Likes

Agreed, I just noticed this for our organization as well.

1 Like

Thanks @jgrajewsky and @ijula for posting this feedback! We do in fact add white behind user and organization avatars to ensure black or very dark images with alpha backgrounds are legible in dark mode. We’ve heard feedback from customers for and against this so plan on discussing it further as a team

Currently, for Organizations, Avatar images cannot be transparent. When uploading a transparent image, GitHub will still display the image with a white background. I’m sure this issue stems from not allowing png filetypes. This used to be no problem, however, due to the new dark mode, this looks extremely bad in some cases. It would be nice to have this image be transparent, this way on the dark mode it does not display with the very-ugly white background.

Example:

2 Likes

Duplicated White backgrounds for user and organization images

Thanks @gpotter2 for sharing the link to the other related topic!
And yes @HPaulson - at the moment we are adding a white background to the user and org avatars in dark mode. We did this so that black or really dark images with alpha backgrounds are visible in dark mode (an example I have from earlier testing). This does however impact org avatars like the example you shared where your intention is to have a circle icon within the rounded square. There has been lots of feedback around this though so we will be reviewing this as a team!

1 Like

Maybe add a way to Enable/Disable the withe Background

My two cents on this is to go with what @byquanton said and have a toggle for what the best background colour is on the avatar (e.g. ones made for dark themes could have transparent on dark theme but have a dark background on light and vice versa, as well as a “any” option that just means it looks fine on either theme). This would allow the option to have the background for the avatars that need it and to not have one for those that don’t.

Maybe the easiest way can be to provide two avatars, one for light and one for dark theme.

If the avatar in the GitHub has a white background it remains the same in the thumbnails but changes according to the mode when viewed in GitHub profile.

This is actually a bug @ShivamBhosale - we didn’t catch all the instances prior to shipping the beta to ensure they were consistent. We are listening to all the feedback though on this as we hadn’t anticipated so many people utilizing transparent pngs. We are separately going to be investigating how to support theme context for images in dark vs light modes which would be similar to @cmeissner’s suggestion

+1 transparency in avatars is how it should be and it’s the way it was for a long time. I will say if GitHub is going to add white backgrounds over the alpha channels they should also store a corresponding black background over the alpha channels for switching between light and dark mode.