PR labels unreadable in dark themes

[Arcanemagus]

Description

The labels associated with a PR use the UI theme's text, but the background color from GitHub, leading to conflicts that can make them illegible.

Steps to Reproduce

1. Have a branch checked out with an associated PR that has a label
2. Attempt to read the label(s) of the PR

Expected behavior:

Labels are legible.

Actual behavior:

Since the labels use the theme color for text, if the theme uses a light color and the label has a light background it becomes near unreadable.

Atom Material (v2):

One Dark:

One Light: (as a usable example)

The label on github.com:

Reproduces how often:

100% of the time.

Versions

Windows 10 x64

Build from https://github.com/atom/atom/pull/14372/commits/4cbff3044604988e2c2553af0d78e71c13c25696.

Atom : 1.18.0-dev-4cbff3044 x64 Electron: 1.3.15 Chrome : 52.0.2743.82 Node : 6.5.0

github@0.0.2 (bundled in the build)

Additional Information

The PR/Branch in question was https://github.com/AtomLinter/linter-phpcs/pull/261.

[simurai]

On .com, the text color gets generated based on what background color a label has:

But it seems the API only provides the background color. So unless the API can be extended to also provide the text color, we would have to use some contrast function. Maybe TinyColor's mostreadable:

tinycolor.mostReadable(color, ["#fff", "#000"]).toHexString();

☝️ should automatically pick either black or white.

[DrianHillman]

Hi! 👋🏽

I'm new to contributing to this project (but not new to Atom); this looks like a great starting point. I'd be happy to submit an implementation for this!

[BinaryMuse]

@DrianHillman That sounds great! Feel free ^__^

[winstliu]

Fixed by #1000.