Editor pop-up editing symbols need to be theme BG color neutral

[weavertheme]

Issue Overview

There are a lot of pop-up symbols used in the editing content - the insert line, the block type symbols, the circled +, the move up down, etc. etc.

The color stylings for these symbols work okay for a white or light theme BG, but with a dark bg color (wihite on black, for example), then they simply become nearly invisible (especially when hovering). If the background of the theme is gray, then they can totally disappear.

Steps to Reproduce (for bugs)

1. Use with a theme that supports Gutenberg and provides editor theme matching styling. (I only know of my own at the moment, but there will be more. White on black is still widely used.)
2. Try to edit. The default symbol color and BG styling don't work.

Expected Behavior

Current Behavior

Possible Solution

1. Find a color styling that will work with all BG colors. I would suggest putting solid bg on each item - like just a bit gray from white. Then the symbols would show on all bg colors.

2. Force the theme to implement alternate editor symbol styling. If this is the solution, then providing a list of all the classes needed for all the editor symbols would really help. I didn't track down if the styling classes for the pop-up symbols are the same as the sidebars, but they must be different if a theme is to be able to style them separately.

A near final release of my theme with integrated Gutenberg support is available at:
Weaver Xtreme 4.0 Beta

Try with the Black and White subtheme.

Screenshots / Video

Sorry, my screen capture software has trouble grabbin popup items that go away when you move the mouse.

Related Issues and/or PRs

Todos

• Tests
• Documentation

[weavertheme]

This can become a theme responsibility. I get decent results on any darker bg with:

/* editor block element controls */

.editor-block-mover__control,		/* The move up-down block mover control */
.editor-block-settings-menu,		/* The settings control on the right of a block */
.editor-inserter-with-shortcuts,	/* The shortcut icons on the right when inserting a new block */
.editor-block-list__empty-block-inserter	/* The circle-+ on a new block inserter */
{
    background:				#C0C0C0;
}

.editor-block-list__insertion-point-inserter::before {	/* insertion line - GB default background is #8f98a1 */
	border:					1px solid #909090;
    background:				#444444;
}

[chrisvanpatten]

I believe this relates to #6406.

[weavertheme]

One more note: I find the border+bg for the insertion-point-inserter to be a better implementation than the pure bg color for the bar. Just seems to stand out a little better. I would recommend that the team consider a tweak to the inserter line.

[danielbachhuber]

@weavertheme Does this issue still need more work or can it be closed?

[weavertheme]

I think this is still a seriouos issue. If the theme has a dark background (a good test: bg hex values less than #888888 are "dark") AND styles the BG in the editor, the default control elements are nearly impossible to see. For example, the vertical 3 dots, the trash can, the + add new block, and so on.

But if the theme is adding style to the editor, then it could also include the CSS to re-style the above block editor styling. My concern is that these may change, or new elements might be added, making it hard to keep up with the necessary custom styling.

[jasmussen]

So, this PR actually solves the situation for both light and dark themes: #6406 (comment)

Only — the dark theme feature isn't yet enabled. You can test it by providing an editor style with a dark background, and manually in the web inspector, adding is-dark-theme as a body class. This will invert the UI.

In other words, the way to address this issue is to enable those dark styles. I imagine two ways of doing this:

• Through JavaScript magic divine what the background color of the theme is, and automatically add the is-dark-theme class.
• Manually, i.e. the theme creator has to specify a variable somewhere to say "this theme is dark".

@youknowriad do you have any ideas on how best to do this?

[youknowriad]

Manually, i.e. the theme creator has to specify a variable somewhere to say "this theme is dark".

This option would have my vote add_theme_support( 'dark-theme' ) or something

[jasmussen]

Sounds good. Is that something I can build? ;)

[youknowriad]

@jasmussen You can build everything :). We can pair if you need help

[jasmussen]

✊

[jasmussen]

Created #9683 to fix this.