Improve editor UI on dark backgrounds

[oandregal]

Here's the lowdown of how dark mode works in the editor at the moment (hat tip: @jasmussen):

• WordPress does not support Dark Mode™ yet.
• Themes might.
• Whether Dark Mode or not, a theme might simply have a dark background.
• On a dark background, an empty paragraph needs to have white placeholder text, or it won’t be legible.

The current solution is a boolean opt-in, that inverts the UI. This opt-in, add_theme_support( 'dark-editor-style' );, simply outputs is-dark-theme as a class in the body tag. This same class is also used in Cover to tell the editor UI to be inverted if Cover detects a dark background.

Can we refactor the is-dark-theme class name to be output based on the luminosity chosen by the background color of the root element in Global Styles, dynamically?

[skorasaurus]

note there's some existing discussion in #9483 ; may want to merge this issue with that?

[oandregal]

Oh, thanks for bringing that up. Just took a look at #9483 and it seems that it's about the parts of the editor UI that aren't affected by themes. This one would target the opposite areas: how do we make sure the editing canvas looks right (ex: placeholder for paragraphs) depending on the background theme color (which may or may not be related to dark/light user preferences).

[youknowriad]

Ideally, it's not just the background color from global styles but sometimes also the background color of the parent elements.

What if a paragraph has a dark background, what if it's inside a group that has a dark color. What if it's an image background?

We could also try a DOM approach: trying to guess the current's background lightness dynamically no matter how it's actually applied.

[jasmussen]

Thanks so much for ticketing this.

I always try to be very careful in the use of terminology: "Dark Mode™" is increasingly an operating system switch that makes the user interface generally darker. This dark mode choice can be picked up by websites, themes, WordPress itself, using prefers-color-scheme.

But sometimes a website just has a black or dark background. Or as Riad says, sometimes a background image is dark, or has a dark scrim overlay. None of that is "Dark Mode".

In other words, whether through Dark Mode or not, the block editor user interface (such as focus styles, borders, placeholder text) needs to work both black and white backgrounds. That's the primary goal of this ticket. I took the liberty of renaming this ticket to better represent that, I hope that's okay 💕