Project name colours are not accessible

[mikeybinns]

Describe the bug

When running vitest UI on a Vitest Workspace, some of the workspace names are in a colour that is very hard to look at / read.

I can see the colours are basically defined here: https://github.com/vitest-dev/vitest/blob/85fb94a3081558b01f47bd763ccdaeb5df1b98cb/packages/ui/client/utils/task.ts#L28

In particular, blue is hard to read on dark mode, and yellow is hard to read on light mode.

All colours used should be checked against an accessibility colour checker to ensure their contrast is high enough, and this likely means having a different colour set for light mode and dark mode, as it's hard to have a single colour which works for both and also looks good.

Here are some screenshots:

Reproduction

To reproduce, start with the Workspace vitest example: https://github.com/vitest-dev/vitest/tree/main/examples/workspace Then rename one of the package folders to cli (this won't be the only way to force it to be blue, just one I know works) Run UI tests and set your theme in vitest UI to dark mode See result:

System Info

System:
    OS: macOS 14.5
    CPU: (8) arm64 Apple M1
    Memory: 201.28 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
  Browsers:
    Chrome: 127.0.6533.100
    Safari: 17.5
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.3.1 
    @vitest/ui: latest => 2.0.5 
    vite: latest => 5.4.0 
    vitest: latest => 2.0.5

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[AriPerkkio]

There's related PR open that likely fixes this: https://github.com/vitest-dev/vitest/pull/6329

[sheremet-va]

https://github.com/vitest-dev/vitest/pull/6329 makes the label more visible. Closing the issue for now - if you think the colors are still not visible enough, feel free to comment