Skip to content

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

@eric-michel

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions