i searched that VSCode have built-in ColorPicker from this Link
But i'm trying to learn code igniter with vscode and there's nothing like that. How to enable it ? i tried to enable editor.colorDecorators:true but its doesn't change anything.
When I had that same problem it was because I had "editor.hover.enabled": false, in my VS Code settings and setting it to true got the color picker working.
Go to settings, the small cog in the bottom left of the screen.
Type in 'hover' into the settings search bar and make sure 'Editor>Hover:Enabled' is checked
Now when you hover a color, the color picker should appear
If you are not seeing the color box, check CSS is selected as the language in the bottom right, if it is not, click on it and select CSS.
try:
body {
background-color: rgb(255,255,255)
}
then hover over 'rgb'
edit:
I've just noticed it also works for #fff, but you need to lose the quotes
Note there is an issue which can explain the lack of color picker, for large files (typically more than 500 lines).
#139743: "Built-in color picker stops working on large css files".
This is fixed by commit c0aa5bb and available in VSCode Insiders today, to be released with VSCode 1.75 (Jan. 2023).
I had this issue the language mode is selected to postcss and not css. When I set to css the color picker boxes appeared again.
CSS-in-JS is popular nowadays, use vscode-color-picker to bring the color picker to files other than css/sass/less (the built-in color picker supports styling files only, for now)
After installation, add the languages list to the settings because the extension does not turn on the feature by default.
on Mac: press Command + Shift + P then choose Open User Settings (JSON)
Then add these settings:
"vscode-color-picker.languages": [
"php",
"html",
"css",
"rust",
"python",
"json",
"jsonc",
"yaml",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"vue-html"
]
As I tested:
It does not work with .tsx file (although it is in the list of the supported languages)
Works well with .js and .ts.
You don't need to do any settings, just remove the double quotes from the color (from "#fff" to #fff).
If that doesn't work out then use these extension, I prefer it to the VS Code picker:
Related
While editing a markdown document in VS Code, the outline box does not show me the outline of the markdown document; it's completely blank/empty. I've disabled all extensions with no change in behavior (and I only had one markdown-related extension anyway, markdownlint). I don't know that this has ever worked, but it certainly has not for the last several months.
OS: Mac OS 12.3
VS Code: 1.65.2
Out of the box, Markdown headings should show up in the outline view as text nodes:
If the outline view is configured not to show strings, Markdown headers won't appear.
Take a look at the Outline: Show Strings setting in your preferences and make sure it's enabled.
This setting is called outline.showStrings. If you wish to enable it only for Markdown files, you should be able to disable the feature globally and then add something like this to your settings.json:
"[markdown]": {
"outline.showStrings": true
},
It's probably easiest to start by running Preferences: Configure Language Specific Settings... in the command palette and then selecting Markdown.
Querying for fontsize in User Settings window yields only settings for:
editor panes,
suggest widget,
markdown preview,
integrated terminal
As you can see below:
Doing the same for sidebar gives even poorer results:
Having fonts of different sizes in editor panes and sidebar looks... let's settle with: not too nice. Have I just found the greatest omission of this awesome tool?
Just want to add to the discussion, If you set:
"window.zoomLevel": "your number",
In my case I started with zero, you can use that as sort of a baseline:
"editor.fontSize": 14,
"editor.tabSize": 2,
"terminal.integrated.fontSize": 14,
"window.zoomLevel": 0,
"[Log]": {
"editor.fontSize": 14
},
And then tweaked until I was happy.
E.g. you want to increase the sidebar font size keeping editor font size unchanged: set "window.zoomLevel": 0.5 and "editor.fontSize": 18. Look at the result. Play with both values to get the result you like.
Mihai Chelaru's answer presents a way to do more than just adjust the sidebar's font size. This, however, comes with a price of a bit of fiddling, possibly more than you'd be ready for, if the only thing you were interested in was the simple act of changing the sidebar's font size. So here's a simpler solution.
Just zoom the whole VS Code's UI in or out with CTRL++ or CTRL+- respectively and than adjust font sizes we do have control over in settings.json file, i.e.:
editor.fontSize,
editor.suggestFontSize,
markdown.preview.fontSize,
terminal.integrated.fontSize
so everything matches. That's it.
This has been a feature request for some time. The short answer is right now there's no VSCode setting that allows you to customize the sidebar font size. There is a hacky workaround solution proposed by #lindesvard in the same issue thread that involves using the Custom CSS and JS Loader extension to load in a custom CSS file that modifies the sidebar styling if you're willing to experiment with it.
To get this working follow the Getting Started section in the extension details, then add URLs to your custom files to the "vscode_custom_css.imports": [""] array. (Note that on Windows mine looks like the following: "vscode_custom_css.imports": ["file:///C:\\dev\\vscode-styling.css"])
Below are before and after adding the CSS mentioned by #PSVapour in a later comment:
Note that this also affects the command palette font.
Apart from #Mihai Chelaru's answer, I found another plugin which helped me dealing with this issue. The name of the plugin is CustomizeUI.
CustomizeUI relies on the Monkey Patch Extension to inject custom javascript in VSCode. Here is the settings I use (in settings.json) for my Mac:
"customizeUI.stylesheet": {
".explorer-viewlet .mac": "font-size: 1.2em !important; overflow: auto; border-left:none!important",
},
Again, this plugin is meant to do more than just changing the font size of the sidebar. But it has some minor advantages over Custom CSS and JS Loader. Like:
It won't show Unsupported on the title-bar or won't show any error message like Your installation is corrupted.
You do not have to reload settings every time VS Code is updated.
You can zoom in and zoom out:
zoom in:
Ctrl + +
zoom out:
Ctrl + -
Change the font size with keyboard shortcuts using the FontSize Shortcuts
plugin. On a Mac, I am able to focus on the terminal or the editor and change the font size of those areas independently of each other.
https://marketplace.visualstudio.com/items?itemName=fosshaas.fontsize-shortcuts
Mihai's answer above works well. He notes that the CSS from here has the side effect of changing the command palette font too.
I only wanted to specify the font size for the debugger sidebar tab. At the time of writing (VS Code version 1.74.3), this custom CSS instead affects only the debugger sidebar tab:
.debug-pane,
.debug-pane .scope,
.debug-pane .expression {
font-size: 14px !important
}
I can't find anywhere in VSCode theming docs how to change the colors of the minimap (background, highlight,...), can someone please help me with this?
Thanks.
Starting in VS Code 1.43.0, you can change the minimap opacity and background color with the following setting in settings.json:
"workbench.colorCustomizations": {
"minimap.background" : "#00002299"
}
I reached this by going to File | Preferences | Settings, typing "workbench.colorCustomizations" in the search box, and clicking "Edit in settings.json".
These are hexadecimal numbers and the order of the color channels is RGBA, so this example gives a very dark blue background and (full-size) characters from the editor can be seen behind the minimap.
this works for me:
"workbench.colorCustomizations": {
"scrollbarSlider.activeBackground": "#62fa1b",
"scrollbarSlider.hoverBackground": "#fa2a1b",
"scrollbarSlider.background": "#c97554",
},
credit
Here's how I sync up my customized minimapSlider and scrollbarSlider.
"workbench.colorCustomizations": {
"scrollbarSlider.background": "#0000001a",
"minimapSlider.background": "#0000001a",
"scrollbarSlider.hoverBackground": "#00000028",
"minimapSlider.hoverBackground": "#00000028",
"scrollbarSlider.activeBackground": "#00000028",
"minimapSlider.activeBackground": "#00000028",
},
I fought this one for a while, turns out it's "editor.background" but you have to restart vscode for it to take effect.
To always show the minimap slider (without having to mouseover) go to
File| Preferences| Settings and search (type in): "minimap show slider".
Change the default "mouseover", to "always".
I think those settings can be overwritten. Go to your VSCode settings and under the workbench.colorCustomizations settings, the ones you're interested in are those starting with scrollbarSlider.*.
Check https://code.visualstudio.com/docs/getstarted/themes for more infos.
Hope it helps
Visual Studio Code's default status bar color is blue, and I find it quite distracting. I used this extension to change the color, but it has stopped working after the 1.10.2 update.
You can change the colour of the statusbar by editing the user settings by adding these lines of code in it:
"workbench.colorCustomizations": {
"statusBar.background" : "#1A1A1A",
"statusBar.noFolderBackground" : "#212121",
"statusBar.debuggingBackground": "#263238"
}
I am going to save 30 minutes of time to noobs like me - it has to be edited in the settings.json file.
The easiest way to access it is menu command File → Preferences → Settings, search for "Color", choose an option "Workbench: Color Customizations" → "Edit in settings.json".
This uses the solution proposed by Gama11, but note:
the final form of the code in the settings.json file should be like this - note the double curly braces around "workbench.colorCustomizations":
{
// fontSize just for testing purposes, commented out.
//"editor.fontSize" : 12
// StatusBar color:
"workbench.colorCustomizations": {
"statusBar.background" : "#303030",
"statusBar.noFolderBackground" : "#222225",
"statusBar.debuggingBackground": "#511f1f"
}
}
After you copy/pasted code above, press Ctrl + S to save the changes to 'settings.json'.
The solution has been adapted from Status Bar colors.
Since every theme is so different, you probably don't want to make changes like this globally. Instead, specify them on a per-theme basis: e.g.:
"workbench.colorCustomizations": {
"[Some Theme Name]": {
"statusBar.background" : "#486357",
"statusBar.foreground" : "#c8e9c5",
},
"[Some Other Theme Name]": {
"statusBar.background" : "#385357",
"statusBar.foreground" : "#d7e9c4",
}
},
That way when you switch between your favorite themes, your customizations of them will not be forgotten, and will make sense in that context.
These are the steps I took to set the Visual Studio Code status bar colors on macOS for a workspace (not globally).
Menu View → Command Palette... → search for "Open Workspace Settings (JSON)".
(This will open the project [project-name].code-workspace file.)
Add the color customizations in the settings property.
{
"folders": [],
"settings": {
"workbench.colorCustomizations": {
"statusBar.background": "#938e04",
"statusBar.foreground": "#ffffff"
}
}
}
This is really useful when you have multiple instances of Visual Studio Code open and want to visually differentiate each window without having to change the global theme.
2022 Update:
Visual Studio Code now opens settings directly on command "Open Workspace Settings (JSON)".
You can just enter the workbench customizations directly:
{
"workbench.colorCustomizations": {
"statusBar.background": "#938e04",
"statusBar.foreground": "#ffffff"
}
}
There is a stronger, more robust solution than the previous answers in my opinion, and that’s to change the status bar color based on the file you're working on—it’s called ColorTabs, and it allows you to provide a list of regular expressions and change that color based on that.
Disclaimer - I wrote the extension.
I just registered so I can't comment directly on HelloWorldDude's reply, but that's exactly what I was looking for: Different colors per workspace to quickly differentiate between Visual Studio Code windows.
I'm on Windows 10 with Visual Studio Code 1.63.1 and the per-project setting is located in the .vscode folder of the project root, and the file itself is settings.json.
The syntax that worked for me does not include "folders" and "settings", but just the contents of the settings block, like so:
{
"workbench.colorCustomizations": {
"statusBar.background": "#7c0101",
"statusBar.foreground": "#ffffff"
}
}
You can change the color by edit extensions:
"colors":{
"statusBar.background": "#505050",
},
There is one more extension available, Peacock, to change the color of the workplace. It allows you to choose a different color for every Visual Studio Code instance.
If you are using the Vim plugin, the best way to change status bar color depending on mode is to go to settings, search for "status bar color" and check "allow Visual Studio Code to change color based on mode"
Here is a snapshot of the Vim plugin status color control:
Visual Studio 1.75 (Jan. 2023) will propose one more option, from issue 155294:
I am becoming a power-user of our debugger (yeah, finally).
This means that most of my "VS Code time" I have some kind of debuggee running or connected.
So, I am seeing the ugly orange debug status bar treatment a lot.
I don't like it and for me it's enough to see the activitybar icon decorations.
Instead of setting statusBar.debuggingBackground in workbench.colorCustomizations, there is now (PR 168513) a dedicated setting:
debug.enableStatusBarColor: Color status bar when debugger is active
This is available in VSCode insider today.
This is also mentioned in "How to prevent status bar colour in visual studio code from changing to orange on running any java file" by Mark.
Press Control + Shift + P when you just open Visual Studio Code and type "open settings(UI)" and search for window.titleBarStyle and change the option from native to custom so that you can restore the colour of status bar from white to black.
Important note: This technique works for update version 1.32 of Visual Studio Code released in February 2019. Make sure that you have updated your Visual Studio Code to the latest version 1.32 or further latest ones as it may not work for the older versions.
I'm trying to highlight the error in more aggressive way, is it possible in VS Code?
Basically to change style of this:
UPD: example of aggressive highlight in webStorm:
UPDATE - Nov 2020
Properties to set a background color on error styles are finally coming! Merged PR here
editorInfo.background
editorWarning.background
editorError.background
This is not shipped yet - I suppose it will likely ship in the next major version (v1.16). Will update here to confirm the version when this happens.
v1.12 and above
Customization of error underline colors are now available natively via workbench.colorCustomizations in workspace settings. See the docs here.
"workbench.colorCustomizations": {
"editorError.foreground": "#000000", // squiggly line
"editorError.border": "#ffffff" // additional border under squiggly line
}
Unfortunately, as far as I can find, for now the native customizations are limited to this. To highlight the error with a background color, for example, you will still have to resort to the plugin method below...
v1.7.2 and above
Error styles can be fully customised via css with the vscode-custom-css extension.
Create a file custom-styles.css with the following (change the styles as preferred)
.monaco-editor.vs .redsquiggly,
.monaco-editor.vs-dark .redsquiggly {
background: rgba(255,255,255,0.2);
border-bottom: 1px solid #fff;
}
Point the extension to custom-styles.css by adding the following in Preferences > User Settings (settings.json)
{
"vscode_custom_css.imports" : [
"file:///path/to/file/custom-styles.css"
]
}
Open up the command palette (Mac: cmd+shift+P, Windows/Linux: ctrl+shift+P) and search for and execute Enable Custom CSS and JS, then restart VS Code.
You're done!
Screenshot with the above styles applied:
If you get any mistakes in the config, or you make any changes in custom-styles.css, try restarting VS Code completely, and it should refresh and pick up the correctly configured/new styles.
N.B. Thanks #Stepan Suvorov for raising the github issue and #Matt Bierner for pointing out the appropriate css, so I could get this fixed with the extension.
If any VS Code devs happen to be reading this, firstly thanks - VS Code is awesome - but the built-in error styling is a significant accessibility issue for colourblind people. I'm red-green colourblind and the red squiggle on a black background is quite a strain to notice for me, particularly with single characters.
The ability to customise the error styles is last thing I really missed, switching to VS Code from atom. Official support for this would be a great feature!
After almost a year, unfortunately, vscode-custom-css stop working for me; in the meantime vscode introduced some settings to customize the layout.
Try to add this in the user settings:
{
// ...,
"workbench.colorCustomizations": {
"editorError.border": "#ca2323a4",
"editorError.foreground": "#ffffffb7"
}
}
It will show the errors in this way:
You will soon be able to modify the background color of errors, warnings and info. See https://github.com/microsoft/vscode/pull/110112, should be in v1.52.
editorError.background
editorWarning.background
editorInfo.background
Previously, the background color could not be changed.
This works in version 1.58.0:
The following JSON goes into your settings.json, which I accessed via settings -> Workbench -> Appearance -> Color Customization:
{
"workbench.colorCustomizations": {
"errorForeground": "#ffffff",
"editorError.background": "#ff0000",
"editorWarning.foreground": "#ffffff",
"editorWarning.background": "#dddd00",
"editorInfo.foreground": "#ffffff",
"editorInfo.background": "#0000ff"
}
}
To my knowledge, changing the styling of errors is not something that VSCode themes or extensions can currently do. This logic is built in. Here's the css used to render the redsquiggly currently
I suggest you open a feature request against VSCode