Message: SyntaxHighlighter Code block text color creates poor contrast in the editor

[lewismoten]

Quick summary

When editing a post using the Message theme, anything displaying code blocks, such as JavaScript, PHP, etc. - text appears as a pale gray color on a white background when the theme is black and white (default style). This for the version of the theme available on Wordpress.com.

Steps to reproduce

1. Create a Blog at Wordpress.com
2. Choose the "Message" theme by "Automatic"
3. Create a new post
4. Click within the paragraph block
5. Type ```js + [ENTER]
6. Change the code from ActionScrpt to JavaScript
7. Start typing in the new code block

A clear and concise description of what you expected to happen.

The highest expectation is that the color of the text should have a high contrast to its background color when editing the post. A lower expectation would be that the background is preferred to be a dark-color, since the theme itself has a dark color background.

What actually happened

The text is very difficult to read as it closely matches the background color.

Impact

All

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

1. Go to Appearance
2. Go to Themes
3. Choose a theme other than "Message"

Platform (Simple and/or Atomic)

Simple

Logs or notes

• Theme: Message
• Style: Default
• I am not visually impaired or colorblind.

[lewismoten]

Colorloops has a similar problem, but it’s not as bad.

[Robertght]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Could Not Replicate with the Syntaxhighlighter Evolved plugin active

📌 FINDINGS/SCREENSHOTS/VIDEO

• I was able to see the same thing and more

📌 ACTIONS

• Triaged
• Reported the other width issue here: https://github.com/Automattic/themes/issues/8247