Suggestion: Add .is-light or .is-dark class to any block with background color selected

[eric-michel]

What problem does this address?

This request was inspired by some conversation in #38719

I am constantly trying to provide my content editors with sensible defaults that make editing as easy as possible. That includes automatically changing the foreground color from dark to light if the chosen background is dark, without the need for the user to also manually select a foreground color that contrasts well.

I have ways to accomplishing that, but they involve automatic color assessment in SASS, along with some extra CSS.

What is your proposed solution?

Gutenberg already has a way to assess lightness or darkness in the editor. The Cover block is automatically given an .is-light class when the background color is light, and its foreground color is adjusted appropriately. However, no other block currently takes advantage of this feature. In Twenty Twenty-Two I can create a Group block with a black background, and the text stays black by default.

It would be amazing if this functionality was extended to all blocks with a background color selected (and given no class if it's transparent, so it inherits from any parent). In my parent theme, I can then provide accessible defaults with a simple:

body {
  color: black;
}

.is-dark {
  color: white;
}

Or if the default background color of my site is dark, I can do the opposite:

body {
  color: white;
}

.is-light{
  color: black;
}

All of a sudden, in six lines of CSS, I have sensible defaults for all background colors for my editors no matter what my color palette is, because the editor will handle calculating whether any given color is light or dark. And, just as importantly, this provides ideal accessibility out-of-the-box. Of course, those foreground colors can be manually changed by selecting something different from the color palette if desired.

Naturally, theme.json could also have options added to define what foreground colors are used by default for each option, making the above CSS automatically-generated.

[cbirdsong]

This would be super helpful. However, the cover block's implementation has issues with gradients, which would need to be fixed before rolling it out universally.

• Dark/light theme determination in Cover block omits gradient #28117

Also, the cover block should actually get an "is-dark" class instead of us using :not(.is-light).

---

Related issues where this idea has been touched on:

• Implicit Text, Hover, Focus Colors as Part of Color Palette #34717
• Cover block reports color contrast accessibility error #39692
• Explore options for standardizing and extending theme.json design tokens for colors #39372

[eric-michel]

Man, there's always an existing thread; I'm just terrible at finding them!

I will close this in favor of #34717 and add my comment there.

I agree the gradient issue for color determination should be fixed. I selfishly want this included as quickly as possible since I typically use solid color backgrounds and it would be really helpful even as-is, but better for it to be fully-functional before being rolled out at-large.