Repository navigation
Shortcut for opening color picker and insert color of selected format #52364
Description
Problem
A huge dealbreaker for me is that VSCode just doesn't let me use the color picker ever, because I'm using Sass files. There does not seem to be any color picker extension that provides the functionality either, that isn't Windows-specific (I'm running macOS).
Feature request
I'd like the ability to spawn a color picker anywhere. So there would be a command that does exactly that, and when you're done it inserts the color code.
A nice inclusion would be if it could know if the cursor is in a color code, and accordingly update that color code. VSCode seems to do this only in a few file types now, which is a bummer for anyone not using those. I don't demand this, as long as I can get a color picker I'm content.
Activity
vscodebot commentedon Jun 19, 2018
(Experimental duplicate detection)
Thanks for submitting this issue. Please also check if it is already covered by an existing one, like:
justablob commentedon Jul 19, 2018
I'd love to see this feature aswell, +1.
octref commentedon Aug 6, 2018
I'm closing this as Sass do not have a language server, which is needed to support this feature.
A simplified explanation as to how color picker works:
CSS/Less/Scss have language servers that can respond with color information properly. Sass doesn't have a LS to begin with.
kasper9n commentedon Aug 6, 2018
Pine (@octref) That was not the main thing this is about. I want to spawn a color picker anywhere (using a shortcut), regardless of whether there's already a color code in the document or not.
octref commentedon Aug 6, 2018
@SpectralKH If you mean you want to spawn a color picker that doesn't have anything to do with the color code in a document, you can implement it as a Webview extension or look for existing extensions: https://marketplace.visualstudio.com/search?term=color%20picker&target=VSCode&category=All%20categories&sortBy=Relevance
kasper9n commentedon Aug 6, 2018
Pine (@octref) None of the existing ones work for me (on macOS). This should be built-in and consistent between platforms.
octref commentedon Aug 6, 2018
If you mean you want this kind of color picker, but for Sass, see my response about Language Server above:
We have this component built-in, but we do not have resource to add support for each language so it shows this color picker component.
kasper9n commentedon Aug 6, 2018
Pine (@octref) I want that color picker brought up by a shortcut anywhere.
octref commentedon Aug 6, 2018
You bring it up with a shortcut and pick a color, what do you expect to happen then?
kasper9n commentedon Aug 6, 2018
Pine (@octref) I expect the popup from the image you shared to show up. Then I'd pick a color and press enter or something for the color code to be pasted in.
To change the type of color code type (HEX, RGB, etc) to paste in, you could
60 remaining items
Kwaadpepper commentedon May 25, 2022
Never mind just saw I has to add the php language into the extension parameter to supported languages.
georgefst commentedon Apr 19, 2023
If #178242 is limited to CSS-formatted colours, that's kind of disappointing. Just because most popular languages have so much ceremony around using custom datatypes that everyone prefers to use strings for everything, doesn't mean the rest of us should suffer!
At the very least, is there a reason why the last line of the screenshot doesn't seem to trigger the color picker? If
rgb(r, g, b)weren't required to be in quotes, then the functionality could be used in most languages by defining a suitablergbfunction (e.g. in Haskell,rgb(r,g,b) = RGBA r g b maxBound, though I'd have to disable my formatter at every use site to avoid a space betweenband().aiday-mar commentedon Apr 19, 2023
Hi, George Thomas (@georgefst), thanks for your comment.
The standalone color picker works for other language formats provided you have an extension installed that defines a DocumentColorProvider. The demo in the video, shows the default behavior when no marketplace extensions are installed, so that the user can still use the color picker when no DocumentColorProviders are present. The default is the CSS format. You may search in the marketplace for extensions that provide color functionality for the language of your choice.
The last line does not trigger a color, because there is no color present there. The PR essentially added a default DocumentColorProvider, which detects if there is a CSS color at the cursor position, and initializes the color picker with that color. If no color is detected, the default RGB(0,0,0,1) is chosen.
The value rgb(r, g, b) does not have to be in quotes when using the default provider. The only reason it is in quotes inside of the video is so that the compiler does not throw errors. As well as that the provider works even if there is a space between the values r, g and b, so there is no need to format.
georgefst commentedon Apr 22, 2023
Ok cool, that's much more promising than I expected, thanks! I might have to try writing a colour provider extension for more idiomatic Haskell syntax, but it sounds like the "default" CSS one will be usable.