question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Alpha colors incompatable.

See original GitHub issue

Versions (please complete the following information):

  • Win10
  • VS Code 1.38.1
  • Peacock 3.1.5

Describe the bug When using CSS alpha colors, the auto-contrast for menu & icons does not work.

To Reproduce

"peacock.favoriteColors": [
        {
            "name": "Nord: Auroa Red",
            "value": "#bf616a4d"
        },
        {
            "name": "Nord: Auroa Orange",
            "value": "#d087704d"
        },
        {
            "name": "Nord: Auroa Yellow",
            "value": "#ebcb8b4d"
        },
        {
            "name": "Nord: Auroa Green",
            "value": "#a3be8c4d"
        },
        {
            "name": "Nord: Auroa Purple",
            "value": "#b48ead4d"
        },
etc

Expected behavior The menu & left-icons to be legible

Screenshots You can see the ‘base’ color in the window behind the dark-orange peacock-themed with alpha. vscode-peacock-bug-alpha

Additional context Kinda low priority. Quickest way is just post instructions how to set the menu foreground colors. A good comprimise is to add optional fields to each theme color:

"peacock.favoriteColors": [
        {
            "name": "Nord: Auroa Red",
            "value": "#bf616a4d",
            "menu": "white",
            "icon": "lemon"
        },

Thanks for your great work.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:18 (15 by maintainers)

github_iconTop GitHub Comments

1reaction
musicfuelcommented, Nov 2, 2019

The light and dark foreground settings can be used to explicitly override the readability choices, though the detection of dark/light background could be off based on the transparency of the color as well.

@tomByrer Peacock works by writing to the workbench.colorCustomizations key in the local .vscode/settings.json file to modify the colors of different elements. After using Peacock to establish the colors, you can easily manually adjust any of them in that file to your liking. In your case, you are probably most concerned with any of the foreground keys and/or activityBarBadge.background.

1reaction
musicfuelcommented, Oct 29, 2019

Interesting. The latest issue on TinyColor relates directly to this https://github.com/bgrins/TinyColor/issues/209

Read more comments on GitHub >

github_iconTop Results From Across the Web

Alpha Loom and Bands [Alpha bands are incompatible with ...
Alpha Bands are not compatible with Rainbow Loom®. Alpha Bands are smaller and wider than Rainbow Loom® Bands as shown below. Size comparison,...
Read more >
Operation between color with alpha and number #2694 - GitHub
I noticed that operation between color with alpha and number always erases alpha. Is that as it should be? Example input: color: rgba(4,...
Read more >
Check if color contains alpha channel with SASS
The has-alpha function will just check if $color contains rgba with str-index and then return true or false . The function requires a...
Read more >
Color (JavaFX 8) - Oracle Help Center
An alpha value of 1.0 or 255 means that the color is completely opaque and an alpha value of 0 or 0.0 means...
Read more >
How do I add two color values containing alpha?
First, you have to consider what having an alpha value less than one means. You can consider an RGBA colour like (1,0,0,0.5) as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found