Add Dark Mode to Previews

[pracko]

Many devices now support dark mode. It would be nice to have a dark mode option for Previews to see how our emails and pages will display on such devices using dark mode. Thanks.

[artf]

Not on top of my priorities but yeah, I agree it would be a nice to have.

[pracko]

Thanks Artur. I was kinda shocked when I saw one of my emails recently in dark mode -- it was very hard to read, especially when some dark text on a light background color was swapped to be white. Dark mode previews would be awesome for pre-deployment usability and accessibility testing. Cheers.

[ronaldohoch]

Maybe its simple to implement...

<style>
	/* Base (light mode) styles */

	@media screen and (prefers-color-scheme: dark) {
		/* Dark mode styles */
	}
</style>

[lexoyo]

Also when you set styles with dark mode selected it should add a media query to apply the change to dark mode only

Same behaviour as the size selector

I guess you see this as a plugin @artf ?

[lexoyo]

There is a bounty opportunity for this GrapesJs plugin :)
https://roadmap.silex.me/posts/4/darkmode-for-websites