Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
stokesman opened this issue Jan 11, 2021 · 1 comment
Open

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

stokesman opened this issue Jan 11, 2021 · 1 comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Enhancement A suggestion for improvement.

Comments

@stokesman
Copy link
Contributor

When using a gradient as the overlay color in the Cover block the theme determination does not factor in the gradient colors. Without an image, the outcome is always light-themed. With an image, if the overlay opacity is > 50 the outcome is always dark-themed. Here are example cases where this makes for poor contrast:

image

The useCoverIsDark hook is what determines which theme to use. I'm assuming that gradient support was added on at some point and the hook was not updated to support it. Probably a fairly challenging thing to get right. Just averaging the gradient stop colors may work well enough if they are equidistant but what to do in case they are not?

To reproduce
Steps to reproduce the behavior:

  1. Go to https://wordpress.org/gutenberg/
  2. Insert a Cover block
  3. Insert a Columns block with empty columns into the Cover Block
  4. Give the Cover block a gradient background with dark colors
  5. Observe the color of the column appender buttons is dark and lacking contrast
  6. Give the Cover block an image, change the gradient to light colors and ensure the opacity is > 50
  7. Observe the color of the column appender buttons is light and lacking contrast
@talldan talldan added [Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Enhancement A suggestion for improvement. labels Jan 12, 2021
@ethanclevenger91
Copy link

The easy solution here is to have a manual toggle. This feature also doesn't seem to work very well with images that are dark to start with and don't need a heavy overlay.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants