When you start the extension for the first time, THE COMMAND HAS TO BE FIRED TWICE! Could have to do something with the creation of the globalStorage-folder. I dont get an error log in the console, so I cant say why this happens.
This extension gives you a color picker that works in all languages. It also lets you save colors in palettes, so that you can quickly re-use colors in your current project. The extension opens in a side-view and adapts to the window-width and your vscode color theme.
This is an alpha, released in july 2019! If you encounter some problems, try to delete the content of the following path:
I hope that Microsoft will give us an option to open a webview-extensions in it's own side-panel. I know that the current solution with the split-view is not perfect. There's a feature request on github. Support that request, if you like the idea:
Buy me a beer
There are 3 commands:
- open color palette
- open color picker
- edit in color manager
For the third command place the cursor on a color value in your document (doesnt have to be selected)
Insert colors into document:
There are two ways to insert a color into your document:
- left-click on a color field in the the color palette (if you are in order-mode or convert-mode this will be disabled)
- left-click on the 'insert'-button in the color picker
The extension will detect if the cursor in your document is placed within a color value. In this case the color value in your document will be replaced. If the cursor is not placed within a color value, the color will be inserted at the current position. Selections will always be replaced.
Edit a color that is saved in a palette:
The extension has it's own context-menu:
right-click on the color and chose 'edit with color picker'
The extension itself has a basic ordering-mode. You can move a single color up and down by drag and drop and there are three buttons (by name, by value, by hue, reverse)
For extensive changes click on the button with the pencil-icon. This will open the current selected palette in a new file-tab. Re-order the colors as you wish and then just save the file. The extension will automatically refresh the view as you save the file (this only works, if the palette-file is opened from the extension)
The rest shoud be self explanatory ... at least I hope so ...
If you dont like the entries in vscode's context-menu, open the 'settings.json' in the extension directory and delete the 'menus'-section (line 22 to 37), but be careful! Hopefully Microsoft will give us an option for this in the future ... my context-menu would take half of the screen, if I wouldnt do this with other extensions.
Why does hex- to hsl- and back to hex-conversion gives me a different hex value???
This does not have to be but can be, depending on the specific color value. This has something to do with the different sizes of the color systems. All you should know is, that this behavior is the same in professional graphic- and image-editing apps and that the deviations are very small ... so dont worry.
Moving color palettes to a different computer:
The color palettes are stored in the global user directory:
... I choosed the scss-language as file format, because of the built-in syntax highlighting for scss.
The largest palette I have tested had 5000 colors. If you are in the list-view and your palette has more then 200 colors, then there will be a dynamic scroll function, which hides colors that are not visible and compensates the space with padding. The performance in this view-mode is surprisingly good. I didnt implement a paging- or dynamic loading-function, because color palettes in desktop apps also dont have such stuff.
If you are in the float-view (the view-mode with the small color fields) then there will be no performance-helper, because a window with a 700 x 900px can already contain around 1000 color fields. So a dynamic scroll function wouldn't make much sense and performance can be sluggish in this view-mode (with very large palettes only)