Vscode: [css] Setting to hide CSS Color preview boxes

[bjankord]

• VSCode Version: 1.4.0
• OS Version: Mac OSX El Capitan v10.11.5

I was curious if there is a setting I can change to hide the CSS color preview boxes?
I'm using the Color Highlight extension which reduces the need for the color preview box.

Here is an example of some colors with both the preview box and the color highlight extension.

[aeschli]

Unless there are more requests for that I'd rather add not add such an option in order to keep the number of options small.

[Matt-Butler]

+1, I would really like this feature too! I prefer to use the color highlight extension

[agmuntean]

I'd rather have the Color highlight functionality implemented to VSCode. The color highlight extension is poorly documented. Besides that I would want to have a color preview to the scss/less color variables, in my projects I prefer to define colors variables instead of writing the hex or rgb code all the time. In other words the color preview is useless to me because it shows the preview in my _variables.scss file only. Should I add this as a new thread??

[bjankord]

@munteana I'd open a separate issue to request having the color highlight functionality implemented to VS Code. I'd like to keep this focused on a setting to hide CSS Color preview boxes.

[octref]

Hope I can turn it off. First I enjoy each left/right moving the same space, not two spaces. Second the square doesn't go well with my font.

[JasonEtco]

@aeschli I'm going to have to write my own CSS to do this, so here's a +1 request :)

[evrimoztamur]

I would like to have this option as well, as it currently messes up vertical cursor positioning as well. See the GIF below (I'm pressing the up and down arrow keys):

[jmlntw]

I think it is better if we have a option to hide this. It messes up cursor positioning.

[nmsmith22389]

How could you not add this as an option? Am I the only one that finds these swatches super annoying? Not to mention they update very slowly, like if I move a line that has one up or down the swatch sticks on the old line for like a second before it finally move. Not to mention the fact that it also messes up spacing perception. I really don't like them and really prefer to just have the background of the color shaded but those extensions are basically pointless because I'm still stuck with that stupid square.

[aeschli]

I'll add an option for February...

[braver]

Would be so nice to be able to turn this off/on for specific scopes. eg. I could really use these in tmTheme files.

[wpjim]

So glad this option is being added! Really, any feature that adds extra characters to your code (not just colorizing or marking it in some way) should be optional.

[bjankord]

Thanks @aeschli!

[jimblue]

Any news about this features? Can't found any option to color box off...

[dutzi]

@jmbelloteau "css.colorDecorators.enable": false

[jimblue]

Thanks @dutzi !

I'm only using SCSS and it's for now. Is it suppose to work on SCSS too?

[aeschli]

@jmbelloteau sure for scss it is: "scss.colorDecorators.enable": false

[jimblue]

@astitcher sharp answer amazing 😄 !

[mitjafelicijan]

I am also having some doubts about the current implementation. Color picker is messing up with padding. As you can see in attachment this adds some additional padding on the left and it is kind of distracting.

Once I added "editor.colorDecorators": false in my settings file everything is now superb :)