Skip to content

Poor contrast between highlighted text and selection background in Suggest menu #2279

Open
@per1234

Description

@per1234

Describe the problem

Arduino IDE has a "Suggest" (AKA autocomplete/Intellisense) feature. When triggered, a menu is displayed offering suggested completions for the line at the cursor position in the editor.

This menu uses several colors to convey information, including:

  • The part of the suggestion text that has already been written in the editor is indicated by a special text foreground color
  • The item in the suggestion list menu currently selected is indicated by a special background color

🐛 When the "Light" theme is in use, the light blue color used by the former has very poor contrast against the light teal color used by the latter.

To reproduce

  1. Select File > Preferences from the Arduino IDE menus.
  2. Select "Light" from the "Theme" menu in the "Preferences" dialog.
  3. Click the "OK" button.
  4. Select Tools > Board > Arduino UNO from the Arduino IDE menus.
  5. Type delay on a line in the editor.
  6. Press the Ctrl+Space keyboard shortcut ("Trigger Suggest).

🐛 The delay text in the selected suggestion menu item is very difficult to read due to poor contrast:

image

Expected behavior

All foreground colors used by officially supported themes have good contrast against all possible background colors for that element.

Arduino IDE version

69b7365

Operating system

  • Windows
  • macOS

Operating system version

  • Windows 11
  • macOS Sonoma

Additional context

I bisected the regression to 9a6a457 / #2144 (the fault does not occur when using the build from the previous commit e17472e)


I noticed that the fault does not occur on the first run after clearing the "user data" folder:

  1. Select File > Quit (or Arduino > Quit Arduino for macOS users) from the Arduino IDE menus if it is running.

  2. Rename or delete the "user data" folder, which is located at the following path:

    • Windows:
      C:\Users\<username>\AppData\Roaming\arduino-ide\
      
      (where <username> is your Windows username)
      ❗ If looking for it with your file manager or command line, note that the AppData folder is hidden by default. On Windows "File Explorer", you can make it visible by opening the "View" menu, then checking the box next to "☐ Hidden items".
    • Linux:
      /home/<username>/.config/arduino-ide/
      
      (where <username> is your Linux username)
      ❗ The .config folder may be hidden by default in your file manager and terminal.
    • macOS:
      /Users/<username>/Library/Application Support/arduino-ide/
      
      (where <username> is your macOS username)
      ❗ The Library folder is hidden by default. You can make it visible by pressing the Command+Shift+. keyboard shortcut.

    ⚠ Please be very careful when deleting things from your computer. When in doubt, back up!

  3. Start Arduino IDE.

  4. Perform the steps described in the "To reproduce" section of this report.
    🙂 The colors have good contrast, as was the case when using versions of Arduino IDE prior to the regression.

  5. Select File > Quit from the Arduino IDE menus

  6. Start Arduino IDE.

  7. Perform the steps described in the "To reproduce" section of this report.
    🐛 The colors now have poor contrast.


Originally reported by @ubidefeo


Workaround

Select a different theme in the Arduino IDE preferences.

Additional reports

Issue checklist

  • I searched for previous reports in the issue tracker
  • I verified the problem still occurs when using the latest nightly build
  • My report contains all necessary details

Metadata

Metadata

Assignees

No one assigned

    Labels

    topic: themeRelated to GUI themingtype: imperfectionPerceived defect in any part of project

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions