Skip to content

FuzzyCompleter: unreadable parts on selected row with white terminal fg #2007

@llamantino

Description

@llamantino

Description of the issue

In the default style, the current completion row is defined as:

("completion-menu.completion.current", "fg:#888888 bg:#ffffff reverse"),

which sets a gray foreground and a white background, swapped by the reverse property, so it renders as white foreground on gray background.

Meanwhile, the 'outside' part of the fuzzy match (the 'completion' part) is defined as:

("completion-menu.completion.current fuzzymatch.outside", "fg:default"),

which leaves the foreground as the default from the terminal. Since the reverse property is inherited from completion-menu.completion.current, the terminal foreground becomes the displayed background for the 'outside' segment.

So, taking the swaps into account, the foreground is white (from completion-menu.completion.current) and the background comes from the terminal foreground. This is a problem when the terminal foreground is white, because then both the foreground and background colors will be white, making the 'outside' segments unreadable.

Here's a screenshot from Ubuntu stock terminal, which has a white default foreground color:
Image

Steps to reproduce

Use this MRE in a terminal where the foreground color is white:

from prompt_toolkit import prompt
from prompt_toolkit.completion import FuzzyWordCompleter

completer = FuzzyWordCompleter(
    ["hullabaloo", "bamboozle", "mumbojumbo", "fizzbuzz", "zigzag", "flimflam"]
)

print(prompt("Pick one: ", completer=completer))

Suggested fix

completion-menu.completion.current has both foreground/background colors hardcoded, so the simplest fix could be to hardcode a suitable color in completion-menu.completion.current fuzzymatch.outside, replacing fg:default.

Example with ("completion-menu.completion.current fuzzymatch.outside", "fg:#444444"),:
Image

Edit: I don't know what the intended look was supposed to be, but considering that:

  1. terminals are usually white-on-black
  2. the 'outside' foreground color is hardcoded
  3. the only variable is the background color, which comes from the terminal's foreground color

the look might have been intended to appear lighter?

Here's a variant with ("completion-menu.completion.current fuzzymatch.outside", "fg:#dddddd bg:#666666"),:
Image
In this lighter version I adjusted both colors to improve readability.

Since I'm not familiar enough with prompt_toolkit to make a call on the intended styling though, I'd rather leave the choice to the maintainers.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions