Vscode: Color picker wont open when hovering over color box or moving between box and value

[electronik54]

• VSCode Version: Code - Insiders 1.20.0-insider (8f015e56dbd0b2a51d562538d7d12599ab9fc0f9, 2017-12-21T08:34:32.639Z)
• OS Version: Windows_NT x64 10.0.15063
• Extensions:

Extension|Author (truncated)|Version
---|---|---
staticserver|gao|0.0.5

---

Steps to Reproduce:
just mention a color in hex format and hover arrow of the hex code, this should normally open a in-biult color picker. This is not working only in the insider version, color picker works perfectly in Visual Code.
however, whenever the color picker would appear, it would quickly close itself and very rarely it would work properly.
This issue is since 2 previous versions of VSinsider

Reproduces without extensions: Yes

[weinand]

@electronik54 the colour picker works fine for me in VS Code Insiders on Windows 10.
You are sure that this problem is independent from any extensions?
So you can repro this when running code --disable-extensions?

[electronik54]

i disabled all the extensions manually, but i still had the same issue... i have same extensions in visual code(_not insider_) but there color picker works fine there...

[weinand]

Instead of disabling extensions manually, please do this:

• shut down VS Code Insiders
• from command prompt run code-insiders --disable-extensions
• try to reproduce problem

[electronik54]

yup... I still have the same problem even after following the steps to mentioned

[electronik54]

looks like issue partially sorted itself out after recent windows OS update (we have set updates to manual)...
The color picker wont appear on mouse over of the color preview in insider version but as of now, its working on mouse over of the color code. Also color picker is slow to appear (by fraction of a second) in insider version...

[eamodio]

This issue might be more appropriate for this comment: https://github.com/Microsoft/vscode/issues/42720#issuecomment-366348158

[electronik54]

why was insiders label removed?? this issue is specific to insiders version (least it was when the issue was posted..)

[staghouse]

I have noticed this same issue but only when working inside of Stylus-based (.styl) CSS pre-processor files.

[coyoi]

I'm new at coding, new at VS Code and new at GitHub. I had the same problem with the color picker, it was not working. Last week, just after installing VS Code (v1.38.0) in Windows 10 (v1903), i opened the settings.json file and set the user setting "editor.hover.enabled" to false, so to prevent the annoying tool-tips from popping up. Now i just found out that by setting it back to true the color picker does work. So, if i want the color picker enabled then i also get the annoying tooltips.

[alexjsdev]

I don't know if this is the same issue as others are experiencing, but I noticed that when hovering over color declarations in anything other than a .css file the color picker does not show up. For instance in the case of css-in-js style definitions, like a styled-component, which is usually in a .js/.jsx file. To work around this there are color picker extensions, i went with this one: https://marketplace.visualstudio.com/items?itemName=RoyAction.color-manager

hope this helps someone!

[perceptron007]

@aeschli @rebornix I want to work on this, can you explain me what needs to be done ?
Please direct me to the files to look for and changes to be made ?

[octref]

Reposting @eamodio's comment on the other thread:

Not sure if this is related or not, but I've found it tricky to get the color picker to show up in css/scss files.

For me the issue was:

1. Hover over the box won't reveal the color picker
2. Hover over box, and then moving the mouse over the value won't reveal the color picker

The normal hover is like a trap: Once you enter it, there is no way to go back to color picker easily. You have to move mouse out and in again to get the color picker.

I updated the title to reflect that.

[aeschli]

@perceptron007 That would be great if you can have a look. Open the dev tools and set a breakpoint in colorDetector.ts - getColorData

[trusktr]

I don't think the color picker should appear on hover. Hovering should show relevant syntax info. Color picker should be on click, so that the color picker doesn't get annoyingly in the way. Normally, a "color picker" is meant to be interacted with, so because it is a more involved UI, it should be an opt-in (by clicking), while hovering would only show informational tooltips (there's no need to see a whole color picker if you're only hovering to see information IMO, and if you really need it, clicking is one easy step away).

EDIT: Even better idea! Make it configurable! Some users may want click, some prefer hover.

When the color preview box is in click-to-open-picker mode, it'd be sweet to have a pointer finger cursor to indicate that it is clickable and will do something (open the picker).

[qJake]

I've been struggling with the color picker for awhile now... at one point, extensions were the norm, until this feature was initially built, and now that it's part of the app, all of the extensions are junk.

I think, in addition to these improvements (clearer ways, and settings, to control when the popup appears), it would be awesome if there was a command palette item to open the color picker and insert a color code at the cursor's current position. I think the initial "gut reaction" of most VS Code users is to check the command palette for actions they can take (e.g. Format Document, Rename, etc), and "Open Color Picker" should be a command as well. This should work regardless of the language mode you are in - it shouldn't be up to the language to determine if the color picker is contextually relevant since color codes are (mostly) universal, even as string values in non-obvious languages.

Would be great to see some improvements in this area, since there don't seem to be any good/reliable extensions for this anymore!

[lyndonjohn]

I'm new at coding, new at VS Code and new at GitHub. I had the same problem with the color picker, it was not working. Last week, just after installing VS Code (v1.38.0) in Windows 10 (v1903), i opened the settings.json file and set the user setting "editor.hover.enabled" to false, so to prevent the annoying tool-tips from popping up. Now i just found out that by setting it back to true the color picker does work. So, if i want the color picker enabled then i also get the annoying tooltips.

This worked for me.

[kamenminkov]

@coyoi Thanks for the pointer, that was my problem too. I had hover (editor.hover.enabled) disabled globally because hovers with descriptions about identifiers were way too much in the way, and didn't realise that the setting covers the colour picker too.

Seconding @qJake , it would be nice to have a little more control over what appears when and also this to be manually triggerable via a command. For now, I think setting it separately on a per-language basis will work well enough for me, e.g.

{
  "editor.hover.enabled": false,
  "[css]": {
    "editor.hover.enabled": true
  },
  "[html]": {
    "editor.hover.enabled": true
  }
}

[rebornix]

We pushed changes to the color picker to allow the color picker to show up when hovering over the color decorator, it's much less possible to dismiss the color picker when hovering between the decorator and the text, thus closing this issue.