enable color info for js file as well? Since I use styled components loading customer js variable with color name.

[adamchenwei]

is that possible?

[arpitjacob]

Looking for the same

[wayncheng]

Adding the following code to colorInfo.languages in settings.json should do the trick. Make sure to include all the default languages as well so they aren't disabled.

{
    "selector": "javascript",
    "colors": "css"
}

So your settings.json should look something like this:

"colorInfo.languages": [
    {
        "selector": "css",
        "colors": "css"
    },
    {
        "selector": "sass",
        "colors": "css"
    },
    {
        "selector": "scss",
        "colors": "css"
    },
    {
        "selector": "less",
        "colors": "css"
    },
    {
        "selector": "html",
        "colors": "css"
    },
    {
        "selector": "javascript",
        "colors": "css"
    }
]

[JuneSites]

This gives me a different pop up. No color picker. Also, I added PHP to the settings but it does not work at all.

[lacivert]

@wayncheng thanks, I tried 'js' as selector but as you stated, it must be 'javascript'. But still, it doesn't show the color as a box on the same line as the color code

[wayncheng]

@lacivert @EasyProWebTools hmm that's odd. Maybe some other editor hover setting or tooltip setting is causing a conflict.

[JuneSites]

@wayncheng For html and css files, hovering over the hex code, gives me an actual color picker with all the other formats and info below, and hovering over the little inserted color box gives me just the info (no color picker). For javascript files - no little color box inserted into code, and hovering over the hex code gives me just the info box (no color picker). For PHP files, not working at all, just says "Loading...". Here is a link to my screenshots: http://www.e33x.com/-test7p/index.php?page=8 Please help. I love this awesome extension but I work mostly in PHP files so I can't really use it most of the time.

[JuneSites]

OK realized another PHP extension was interfering. Now PHP files act just like javascript files - no little color box, and hovering over hex gives popup of just the color info (no color picker). What can we do to make the little color box and color pick show up always?

[wayncheng]

@EasyProWebTools I don't think this extension includes a color picker, just the info.

[Roshdy]

@lacivert @EasyProWebTools hmm that's odd. Maybe some other editor hover setting or tooltip setting is causing a conflict.

the hover is working fine for "javascript". But the color box doesn't show. Example: colors = { red: "#ff0000", white: "#fff" };

[wayncheng]

@Roshdy So the tooltip and the text info inside is visible, but the actual preview of the color isn't?

[this-fifo]

@wayncheng I believe what @Roshdy is referring to is the same as what was described in https://github.com/mattbierner/vscode-color-info/issues/12#issuecomment-370178964

Same happens for me, I can hover and see the info on .ts .tsx .js .jsx files after configuring the selectors for these languages but I can't see the handy box that would save me from having to use the mouse

[death14stroke]

@this-fifo have you found any way to show little color box in javascript files for react native?

[this-fifo]

@this-fifo have you found any way to show little color box in javascript files for react native?

I haven't, only thing that works for me on js files is the hovering but not the colour box

[Spenhouet]

I was trying to use this extension to show colors in yaml files by adding:

       {
            "selector": "yaml",
            "colors": "css"
        },
        {
            "selector": "yml",
            "colors": "css"
        }

but experience the same issue that I only get the box on hover but not the little color square.

[hamudeshahin]

Any solution for tsx and jsx files ???

[alainib]

@hamudeshahin it work with js and tsx files too (with react/reactnative) https://github.com/mattbierner/vscode-color-info/issues/11

[NoHop3]

Any future plans for enabling the little color box? Currently only hover works for js/ts/tsx files still

[grempa]

I'm also hoping for the little colorbox left of the value in js files (should be like it is in css files)