I believe this has been talked about before but it’s still a major problem now: dark background colors. If you want to create a site with Pro with dark background colors you’re going to have a bad time. You won’t be able to see row, column and element outlines and dragging and dropping becomes an annoying guessing game.
Set the background color of a section to black and you’ll see.
Can something please be done about this?
Hi @JvP,
Thanks for reaching out about this. You’re right, that’s definitely something we need to address. It used to have alternating classes to use a lighter color when the background was detected to be darker. I’ll keep you up to date here.
Fantastic, thank you 
Alrighty, this will be partially fixed in beta4. Contrast detection is applied based on colors, but doesn’t work on Classic Sections/Rows/Columns. It also doesn’t take consider image dominant colors like it used to. We’re getting there though.
That’s a good start 
Just pushed beta4 Give that a try and let me know how it works for you.
Just updated to beta 4, cleared all caches and all that and nothing’s different?
Edit: nevermind it’s working now. It’s much better!
Thanks for checking! Supporting BG images again will be great. I was never really happy about how we were calculating the dominant color since it was so performance intensive. I could just use what we have already fairly easily but I want to explore using “Offscreen Canvas” in supporting browsers so it doesn’t happen in the same thread as the UI. This will prevent unexpected pauses and it feeling locked up during the moments where images are processed.
Good stuff!
After playing around a bit more I now notice that sometimes the column outline disappears again when you delete elements from it. It becomes invisible again on dark backgrounds. It doesn’t happen every time.
Gotcha, to fix another issue (global colors failing) and also get things ready for image color detection I moved the code so it runs in the editor frame instead of the preview frame. It’s structured a bit differently now. I’m not seeing anything change when elements are deleted. Let me know if you have any issues in the next version. Thanks!
Hey @alexander your fixes seemed to have had no effect on the global block editor. Using dark backgrounds there is still problematic.
Thanks! Sorry about that - missing a CSS selector. Fixed.
No worries, that’s what we’re here for 
Hey @alexander, this is still an issue in v4.1.
When you set a dark background color the outlines are very hard to see. There’s no automatic switch to a lighter color for the outlines.
Hi @Jvp,
I’m sorry, I know it’s still there. I actually disabled it for the time being. The problem is it was actually a rather large performance hit to calculate all that in the preview. We do intend to bring it back but need to revisit safer ways to run that logic without slowing things down.
Hi @JvP,
I’m sorry, we haven’t - it’s still open in our backlog for consideration but with how things have evolved in Cornerstone used nested and composed elements is much more common. The technique we used previously was performance intensive even with just a Section > Row > Column configuration.
The earliest we would come back to this is after layered backgrounds and gradients are added to the tool. If we can’t find a one-size-fits all contrast detection solution we might just make it a preference.
Meanwhile, try adding this to Global CSS:
:root {
--c-global-preview-receiving: rgba(255,255,255,.425);
}
That should make things more usable on sites with primarily dark backgrounds.
That would be great. In the meantime the CSS you provided does work on sites with dark backgrounds, thanks. Still not ideal when you use both dark and light backgrounds on a site.
Glad to hear that the workaround is helping in the meantime.