Keyboard shortcuts use different colors.

[afercia]

Splitting this out from #10576 (comment)

I'm not wrong, the block "more" menu shortcuts (on the left) and the ones in the main "more" menu (on the right) use two different colors: #555d66 vs. #40464d both with 0.84 opacity set on the wrapper element.

@jasmussen any reason why they're using different colors? Of course, I'd prefer the darker #40464d for both 🙂

Also: I'm not sure why many elements in the editor use CSS opacity, which makes things difficult when calculating color contrast. If there's the need for some transparency, I'd tend to think single elements should use rgba() colors, not opacity set on the container. @jasmussen can you shed some light on this? Is there any need to use opacity in these two specific cases?

[joyously]

Did you test how this affects dark mode?
I use opacity instead of rgba so that it works with all colors. Perhaps that was the reasoning?

[afercia]

Dark mode as in: a dark theme or something else? I don't believe dark themes change the Gutenberg UI (not those menus, at least).

[joyously]

OK. I meant whatever you get when the theme uses add_theme_support( 'dark-editor-style' ).
https://developer.wordpress.org/block-editor/developers/themes/theme-support/#dark-backgrounds

[afercia]

That only changes the Editor content area and the blocks backgrounds. Not the toolbars and menus. Example:

The "Gutenberg" and "Gutenberg Dark" test themes allow to easily test. @kjellr would it be possible to make these two themes more widely known and available for download so that designers and testers can test autonomously?

[kjellr]

The "Gutenberg" and "Gutenberg Dark" test themes allow to easily test. @kjellr would it be possible to make these two themes more widely known and available for download so that designers and testers can test autonomously?

Hey @afercia! Yes, I'd love to make these themes easier to access. They're key to testing, now that (I believe) all the default themes have some sort of editor style included.

To start, there's an issue that aims to get the Gutenberg Starter theme included with this repository's Docker environment by default: #14454. That would make the theme much more widely available for people using this repository. As for the dark mode, I should be able to actually just build that in as a theme option for the Starter theme so people only have to install one theme. I'll get a PR going for that later this week.

[joyously]

Circling back around, I think what was in my mind was the icons that show on hover at the bottom of the content. There is no background color on those, so they are not always visible.
And, it would be best to include another test setup for a theme that allows color choices but does not call the add_theme_support for dark mode, because that is the main case for legacy themes.