Quote button is now black in dark mode and hard to see

The quote button used to be grey, making it really easy to see against the black background. Now it’s black and blends into the background, making it really difficult to see. Not sure if this change was intentional, but I request changing back to the preview styling or doing something else that adds more contrast with the background.

Image from here on Meta:

image

3 Likes

Hi! Which theme/colour scheme combination are you using?

Thanks for the feedback! the intention was to style this popup the same way we style other popup menus, but yeah it’s definitely harder to see in dark mode than in light mode…

Screenshot 2023-01-30 at 9.51.29 AM

We’ll take a look and see if there’s some better middle-ground

6 Likes

Just wanted to see if there was an update on this. I’m still finding it difficult to see where the quote button has appeared when I highlight text.

3 Likes

One minor improvemnet is that we’ve created a separate set of shadows for dark color palettes that are more opaque. So while a light color palette may have a shadow with a 0.15 opacity, a dark color palette will use 0.5 so it’s a little more apparent. This isn’t very helpful for color palettes with a pure black background though.

Screenshot 2023-07-10 at 2.38.11 PM

Another improvement worth looking into is something you can see on Github… in their dark color palette they make the dropdown backgrounds slightly lighter to give them more contrast from the background.

imageimage

@CvX astutely pointed out that this is similar to what Apple suggests in their interface guidelines:

When two light interfaces are layered, a simple, diffuse drop shadow is all you need to create visual separation between the two. With dark interfaces, drop shadows are slightly less effective.
System background colors will use the darker or base values for background apps or interfaces and the lighter, elevated values for apps or interfaces that are in the foreground.

The concept is that since the dropdown is closer to the imaginary light source that casts the shadow, it should be brighter.

4 Likes

Yes, making the quote button lighter (even if not as light as it was before) would be helpful I think.

1 Like