My main goal was to insert colors by meaningful names ... i dont wanna know how many hours i've lost by copying and pasting color values in the past 😩
The model of the color picker is different to the one in vscode. It's a recreation from one of the color pickers in Affinity Designer (a nice graphic app i'm using for mockups).
No Node-Modules! The main extension is plain Vanilla JS and has only a few KiloBytes
Buy me a coffee
add color palettes to autocoplete:
customizable UI colors:
... the "restore factory palettes"-command can also be used to check if new palettes were included with an update. But beware if you have customized existing factory palettes! In this case you should rename them, otherwise they will be overwritten.
Edit a color value in your document | store a document color in a palette:
Place the cursor on a color value in your document (doesnt have to be selected). Run the command "edit in color manager" or choose it from vscode's context menu. Use the "insert"-button on the bottom of the color picker to replace the document color.
The button "add color to palette" will store the document-color to the currently loaded palette. It will be inserted at the position of the currently selected palette-color (red frame) ... or at the beginning if no color is selected.
Insert a palette-color into your document:
Run the command "open color palette" or choose it from vscode's context menu. Place the cursor on a color value in your document ... doesnt have to be selected
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 button "replace palette color" on the top of the color picker will replace the currently selected color.
Edit and Insert a Hex-Color with the prefix "0x" instead of "#":
If you want to toggle that setting on the fly, then I recommend the extension "Settings Cycler". I think this is the best solution, because it avoids double-entries in the palette for different languages. And it did less work for me :)
Gradients can only be edited by the inputs. Maybe I'll include a gradient generator in a future release.
Okay ... one user gave me a bad review because he didnt know how to add a palette. So here is an image that explains all the buttons. The buttons also have hover-tooltips.
Shortcuts within the webview extension:
I would have implemented more shortcuts but some of them will overlap with vscode's existing shortcuts (like ctrl + e).
Add color-palettes to vscode's autocomplete/intellisense:
Run the command "intellisense add palette". It will add the last loaded palette to vscode's automplete-widget, so the webview-extension itself doesnt have to be opened for that command.
If you do changes to the currently active palette it will automatically refresh the intellisense entries. If you want to load another palette to intellisense, then open Color Manager, load another palette and run the command "intellisense add palette" again.
Remove palette from autocomplete: run the command "intellisense remove palette". When you close vscode the palettes are removed from autocomplete ... so you have to run the command everytime you start vscode.
Customize the colors of the user-interface:
By default the extension adapts to your vscode theme. I recognized that in some themes it just doesnt look good, so since v0.5.0 you can completely customize the colors of the extension.
Here is an example that you can paste into your settings ... looks like shit, but should give you a good overview!
Don't pollute my context-menu!!! :(
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 26 to 41), 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)
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: https://github.com/Microsoft/vscode/issues/46585