Very bad contrast on GQL query shown in studio console

[johnny-smitherson]

Describe the bug (must be provided)

green on green makes my eyes hurt

cannot read these without selecting text in browser

Your Environments (must be provided)

• OS: Windows 10
• Node-version: docker nebula-graph-studio:v3.9.1
• Studio-version: v3.9.1
• Seen both in Firefox and Chrome

How To Reproduce(must be provided)

1. Run some console queries
2. Refresh page
3. Try to read older queries
4. bad contrast green on green

Expected behavior

Good contrast, for example after editing in DevConsole with color:#111:

Additional context

proposed CSS changes:

• color: #111
• font-family: monospaced

[huaxiabuluo]

@yyh0808

[yyh0808]

Thank you very much for your detailed suggestions!

Regarding colors and fonts, I completely agree with changing the style to a mono font. We originally also hoped to use a mono font for a better development experience.

After using the mono font, the issue of colors being hard to read will improve significantly. However, since you mentioned that the colors still seem a bit painful, we will take your advice and deepen the font color to make the code look more comfortable.

Thank you again for your enthusiastic and detailed suggestions.

[johnny-smitherson]

After discussion in #771 it seems the root cause might be the combination between:

• the Success/Failure design language (where color is 90% of the message information, e.g. "Sucecess" / "Fail", and where the product has its design guidelines to make it visually consistent)
• the SQL where the the dots and dashes and syntax highlight colors of the code itself are relevant (and where the programmer is used to design guidelines for code, such as colored, monospace font, high contrast, white background).

I believe this combination does not work in this context. Here are my suggestions, courtesy of mspaint.exe

---

Also works with the grey background "can't type into this box" shade:

---

Good luck!