Improve labels coloring and displaying in dark mode

[xplosionmind]

Labels should be readable regardless of the color and of the theme. In this screenshot, it appears that, for example, that blue labels are not well readable in dark mode.

[jacksonh]

Thanks @xplosionmind yeah we have a better algorithm on iOS that takes into account the colour + the mode. I noticed GitHub does this too, where it will sometimes invert the text colour.

[rupin90]

Do we have predefined colors based on different themes? Is there a mapping of colors according to theme?

[jacksonh]

@rupin90 right now we don't the colour can be user specified, but on iOS I believe @satindar has an algorithm for determining what the font colour should be based on the label colour and the them. You can kind of see how GitHub does this too, but changing themes and seeing how the labels are rendered.

[satindar]

On iOS we calculate the Luminance value and if it's less than 0.5 we consider it a dark color and use a white text color.

This seems like the way to calculate the same with JS:

https://gist.github.com/jfsiii/5641126

[rupin90]

Wow, thank you 🙏

[jacksonh]

Hey Rupin, your PR improves things a lot but I think we might want to adopt something like GitHub where it switches between filled and outlined based on theme. I'm working out the rules now, but here are two screenshots:

[rupin90]

@jacksonh - Yeah true. What I understood is

• in light theme, user selected colors applied as a background instead as a text. If the background is dark then the text color is white, if background is light then text color is black.
• in dark theme, user selected colors applied as a text (with border and a translucent background). There is definitely a lightness threshold that is brightening the text even more!
  • exception with Black color is that - it is applied as a background with white text.

[rupin90]

Final outcome to implement

1. The label outline -

• border in dark theme
• No border in light theme

2. The background color -

• Dark theme
  • translucent/low opacity user selected color with brightened border.
• Light Theme
  • user selected color with full opacity

3. Foreground color -

• Dark theme
  • user selected label color is the text color
• Light theme
  • if user selected dark color then text is white
  • if user selected light color then text is black

[rupin90]

Do we already have a way to set the background color? - this is for the light theme.

[jacksonh]

@rupin90 I think for light theme its just as simple as setting the background color to the label color.

[jacksonh]

Duplicated here: #555 -- will close that one out.

[rupin90]

I am closing this issue since the PR is merged.