Color picker in VS Code stopped working

#1

I noticed that hovering over a color last night did not open the color picker. I’m not sure when this first happened because I haven’t done anything with CSS in VS Code for at least a week or more. Has anyone else had this problem, and if so, how did you fix it?

I found something in Stack Overflow about disabling PostCSS Language Support. Assuming that is the fix, how would you do that?

Here is my settings.json file:

{
    "window.autoDetectColorScheme": true,
    "editor.accessibilityPageSize": 26,
    "editor.wordWrap": "on",
    "debug.console.fontSize": 26,
    "workbench.iconTheme": "vscode-icons",
    "editor.renderLineHighlight": "gutter",
    "prettier.singleQuote": true,
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    "liveServer.settings.fullReload": true,
    "editor.minimap.enabled": false,
    "breadcrumbs.enabled": true,
    "editor.renderWhitespace": "none",
    "editor.fontSize": 16,
    // added this one last night:
    "editor.hover.enabled": true,
    "editor.hover.delay": 5000,
    "editor.quickSuggestionsDelay": 500,
    "liveServer.settings.donotShowInfoMsg": true,
    "terminal.integrated.cursorBlinking": true,
    "diffEditor.renderSideBySide": false,
    "html.hover.references": false,
    "html.hover.documentation": false,
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter.notebook.ipynb"
    },
    "liveServer.settings.donotVerifyTags": true,
    "editor.acceptSuggestionOnCommitCharacter": false,
    "git.autofetch": true,
    "files.associations": {
        "*.css": "scss"
    },
    "window.zoomLevel": 1,
    "html.format.maxPreserveNewLines": null,
    "html.format.wrapAttributes": "auto",
    "workbench.colorTheme": "GitHub Dark Default",
    "redhat.telemetry.enabled": true,
}
#2

You cannot put comments in JSON.

#3

I don’t have that comment in my actual settings file, that was just for the post

1 Like
#4

I’m not sure. I don’t want to start messing with my setup to try to replicate. But I would guess that that extension uses hover events so that might mess with them.

I would suggest checking the repo for that extension - you might get more hits there.

#5

I might just uninstall it and then download it again.

#6

Yeah, the equivalent of “turning off and on again” - it’s always a good idea.

#7

That sounds like sarcasm. Is that correct? Do you know of a different solution?

#8

It was meant more as funny, like the joke from the TV show The IT Crowd, “Have you tried turning it off and on again?” (And that show is required watching for anyone who wants to work in tech. :wink: )

Yes, I think reinstalling the extension is a good thing to try, as is making sure your editor is up to date. My next step after that would be googling the problem and then checking the repo for that, whichever extension you have.

#9

I don’t have an extension for that, it is a part of VS Code. But I made some changes to my computer to stop System Interrupts. I just undid some of those and it’s working, though that may not have been it. I did set "editor.hover.delay": 5000, to 5 seconds, and that is what did it. I set it to 2000 milliseconds. I have been trying to stop the MDN popups in VS Code and that was the only one that helped.

There is always something you need to do…

#10

“Turn it off and back on again” is both a running joke in technology and actual advice when a device isn’t working.
IT crowd gif

1 Like
#11

If your IDE has MDN related popups, that’s definitely an extension that was added.

#12

No, it’s an issue that you can find on StackOverflow and GitHub. It’s a part of VS Code - a popup with a brief description of the tag or property you are hovering over and it’s very easy to accidentally click it and have an MDN doc open in your browser. Do you either not use VS Code or does this not happen to you?

  1. [css][html] Option to disable MDN Reference popups only (without effecting other functionalities) · Issue #97979 · microsoft/vscode · GitHub
  2. Is there a way to disable "MDN References Intellisense" popup (for HTML & CSS) in VS Code? - Stack Overflow

I thought everyone had this issue.

#13

Today I learned.
I work in VSCode all day, but I had never encountered this. But you can turn that off in settings:

screenshot of html settings

screenshot of all hover: references settings
screenshot of all hover: references settings1016×437 35.3 KB

#14

The setting for the color picker is called “Color Decorators” (under Editor). Note that it will only work for RGB or hex color codes. It may not work for RGBA, shorthand hex, etc.
screenshot of color decorators setting

#15

I thought I looked at all those settings but let me check t hat - thanks - have to run to work for a few hours

#16

Ok, that did it. I had the HTML hover settings unchecked but I didn’t know about the other ones. I removed "editor.hover.delay": 2000, and the color picker is back with no delay - YES! Thanks!

1 Like
#17

I’m glad I could help. Happy coding!

#18

I realize there are times when you do need to edit the settings.json file (which is fine) but I would suggest always using the settings interface when possible (just to avoid issues).

I don’t see why setting the hover delay to 2000 would break anything, what happens if you do it using the settings interface (open the settings and search for hover). It should work just fine with a 2000ms delay (I have it at 800 and the default is 300).

#19

Actually, I just added back "editor.hover.delay": 2000, but changed it to 2500. I don’t think that broke anything. It was when I had it set to 5000 which made it seem like something was wrong. Any time I can work with JSON I’ll do that. It’s something I have to work with it JS so I would rather do that.

#20

It’s up to you but the editor has an interface/API for the settings for a reason. There are settings that might get changed or deprecated and it is much more likely to make mistakes when editing the json file directly.

Practicing is fine, using the editor settings file is probably not the correct place to do so.