[Documentation] Change the colours of the code section

[kud]

The code on the documention is tough to read. Maybe it's because I'm a bit colourblind but it hurts my eyes to read the code.

Some tools:

• https://accessible-colors.com/
• https://webaim.org/resources/contrastchecker/

https://codemirror.net/demo/theme.html#material could be nice.

Thank you!

[kud]

Code's here: https://github.com/mjmlio/slate/tree/master/source/stylesheets

[dougfabris]

Hey @kud I agree with you, the code colors of documentation hurts our eyes. So I tried this combination without make a big change in actual color palette. First of all, I believe we need to change background-color and his shadows and then, change the red color to another that make more contrast and less brightness. Do you think it could be better like that?

[kud]

That's really great! Thank you to answer so quickly too!

I'm more than ok with those colours! Good for me.

[dougfabris]

@kud You're very welcome! The MJML project helps me a lot... I'm always trying to do the same, as I can.

[iRyusa]

cc @ngarnier

[iRyusa]

@kud @dougfabris

Is current try it live (https://mjml.io/try-it-live) theme accessible enough ? So we can maybe use this one instead ? Or we should update it to so we can re-use the same on both doc & try it live ?

[kud]

Yes, it's ok for me, with maybe a darker background.

[dougfabris]

@iRyusa I agree with @kud. To be more accessible, maybe we will have to use a darker background, to get a nice contrast with the red color. This tool is a good option to check the contrast ratio: https://contrast-ratio.com/