Search code examples
reactjsdesign-patternscolorscomponentsuicolor

Replicating color box in VScode when writing CSS


I'm currently working on a project that basically shows a map. The map, image below, has different color gradients and I'd like to replicate the effect of vscode when you set color in css and it shows a little box that displays the color. I'd display that color and write a comment beside it.(I.E green = Great economy, light green = medium economy, and very light green = poor economy).

I'd really like to replicate the color display you see in vscode when you set color properties in css like this: enter image description here

Image


Solution

  • Open up settings in vs code (on a Mac, press command+comma)

    Search for Color Decorators and check the box

    enter image description here

    More on vs code settings https://code.visualstudio.com/docs/getstarted/settings