Skip to content

Fix unreadable text in dark-themed editor tooltips

Martin Čavoj requested to merge 371333-ux-bug-dark-mode-policy-page-2 into master

What does this MR do and why?

This MR fixes unreadable headings in dark-themed editor tooltips:

These headings are unreadable only in certain combinations:

  • light GitLab color theme + dark syntax highlighting theme.
  • dark GitLab color theme + light syntax highlighting theme.

The solution feels a bit hacky, but I didn't find a way how to override these specific styles via themes.

Investigation of the issue
  1. I looked for possible color definitions in vscode repo, but the closest I got to changing this color was the following, by applying 'editorHoverWidget.foreground': '#ff0000', which only changes the text around the problematic heading: CleanShot_2023-04-04_at_19.24.34_2x

  2. The problem is essentially caused by these styles:

Light GL theme + dark syntax highlighting Dark GL theme + light syntax highlighting
CleanShot_2023-04-04_at_19.17.55_2x CleanShot_2023-04-04_at_19.16.41_2x

Screenshots or screen recordings

Before After
light_dark_before light_dark_after
dark_light_before dark_light_after

How to set up and validate locally

  1. Go to Security & Compliance -> Policies and create a new policy. Example
  2. Switch to .yaml mode
  3. Hover over the code with warnings

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #371333 (closed)

Edited by Martin Čavoj

Merge request reports