Checkerboard background in asset editor should always be dark

[daun]

Bug description

When editing an image with transparency, the checkerboard background is either white or black, depending on the current dark/light mode. While that makes sense in the asset grid, where the background is also either light or dark, the asset editor background is always black, so the checkerboard should also always be black.

Editor

Changes depending on mode but does not blend into background.

Grid

Changes depending on mode and blends into background. 👌

How to reproduce

• Upload a PNG with alpha channel
• Compare asset grid and editor display while toggling dark/light mode

Environment

Statamic 6.2.5

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

[jackmcdade]

What about when you have an all-black transparent image then? 🤔

[daun]

@jackmcdade You mean a black logo on transparent background? That currently works well in light mode, where the checkerboard is always light. In dark mode, the checkerboard is always dark so it wouldn't work too well. Same for the asset grid, where it changes with dark/light mode. With white logos, it's the other way around, where it would only really work in dark mode. I guess both of these could be solved by making the checkerboard pattern a bit more pronounced by adding contrast.

But I think that's a different issue? This issue is more about having consistent logic for choosing the checkerboard color. There are currently two different approaches:

• In the grid, the checkerboard matches the background directly behind the image
• In the editor, the checkerboard matches the page background behind the modal

I'm suggesting the editor should also use the background directly behind the image, like the grid does. In this case, it would always be dark. Switching between light and dark mode then wouldn't change the checkerboard color in the asset editor. The color behind the image stays black regardless of the mode, so the checkerboard should remain the same.

[jackmcdade]

Right, what I'm saying is it feels like no matter what we do, you won't be able to see something. 🤔

[daun]

Oh, I see, haha, sorry for making you read through all that again 🤠

I do think that pulling the checkerboard gray a bit more toward the middle (neutral gray) should help. Not sure if enough for every circumstance, but enough to make it better for the more common scenarios of black/white.