Dark components on dark mode are low contrast

There now does not seem to be any way to find icons with a light background when you use dark mode. Before I could browse all the icons in our component library via the “Resources” link/icon in the top vertical menu, and here all icons have white background. Now, when this has moved to the new Action toolbar in the bottom of the tool, the transparent background is showing meaning that I just see dark icons on dark background, which mean that it is so much harder to find the correct icons in the library.

I would really appreciate to have a light background for the assets, like icons and such.

Hey @Martin_Maricak, sorry for the delayed reply and thanks for flagging this!

This seems like a bug, since we fixed a similar issue ~2 years ago. We’ll send this over to the team to investigate.

Hey All,

I just wanted to give you an update from the team. They are working on implementing a setting that will auto-set the best background color based on contrast, but they don’t have an exact timeline on the fix yet.

In the meantime, as a workaround, you can wrap icons in a frame so that the color of the frame will be used as the background color in the asset panel, regardless of which mode you are using.

We appreciate your patience and understanding as the team continues to work on this!

Nice, it works for me now, I like the solution! Thank you. 🙂

Hello! Just got UI3, and I see this issue again, so I thought I’d report it here, instead of creating a new post.

Thanks for following up, @Martin_Maricak!

Our team confirmed that this is still expected behavior on UI3 for now. They’re still working on setting background color based on contrast.

For now, I would continue using the same workaround above. Wrap icons in a frame so that the color of the frame will be used as the background color in the asset panel.

hello, wanted to confirm that this is stil happening. also wrapped the icons in a white-bg frame and they still don’t show 😦

WORKAROUND FOUND:
basically Figma will default to whatever background you’ve used for the icons WRAPPER frame. so wrap your icons in a frame and add a background to that – your icons will be visible again.

HOWEVER, if that frame is inside of a section, then Figma defaults to the section’s color, so you gotta adjust that one instead.

old topic, but finally solved!