How do I change the activity bar icons in Visual Studio Code? I kept googling but couldn't find anything, and have seen people do it, here for example.
Also, can I make VSC's background transparent?
To change the color of the badge, you need to add this to your settings.json file:File > Preferences > Settings > Open json file
"workbench.colorCustomizations": {
"activityBarBadge.background": "#0F99D677",
"activityBarBadge.foreground": "#EEE"
},
In your example, looks it is a theme with a CSS gradient or a picture as background. It seems this cannot be achieved with a setting, you probably need an extension for this.
Same to make VS Code transparent; you could use this one:
https://marketplace.visualstudio.com/items?itemName=s-nlf-fh.glassit
Related
The foreground color of some text in my VS Code sidebar is randomly darkened out. Often, these files are files I am actively working with, and it's very difficult to navigate.
I am currently using FireFly Pro Midnight, and the only customization I have is a change to the foreground color to brighten it. The issue occurs whether I change the foreground color or not.
Does anyone know of a good way to change this coloring or the reason it is dimming out certain file names?
Darkened Text
My Only Customization
This might not be your solution, but here's what worked for me. I had the Git color status activated in my sidebar, so the title of modified files were displayed as dark blue, untracked files as dark green, and ignored files (listed in .gitignore) as almost grayish-transparent.
The ignored files were the one causing the problem, so here's the fix using theme color customization.
Go to Preferences > Open Settings (JSON), then add this custom block:
"workbench.colorCustomizations": {
"gitDecoration.ignoredResourceForeground": "#949494" // dark gray, but not faded
}
I'm creating a custom colour theme extension for Visual Studio Code and I can't find out how to customise the colours for certain parts of the user interface. The theme is complete, apart from customising the reference popup window.
Here is the popup window I'm trying to customise:
I wish to change the blue background and if possible, the blue border lines. I'm sure this can be done because some of the built-in themes do so. Does anyone have an idea what I would need to put into the colour theme file to achieve this?
I'm also looking for pointers to customise the status bar colour (at the base of the editor).
As far as I know, this is not possible.
Some of the built-in themes are build differently. Most themes are textmate style themes, but you can see here that some of the built-in themes are .json files and are somehow handled differently.
You can find the theme documentation here. Specifically, this part is relevant:
Besides the TextMate language grammar standard scopes, VS Code also
has custom theme settings which you can use to tune your own theme:
rangeHighlight: Background color of range highlighted, like by Quick open and Find features.
selectionHighlight: Background color of regions highlighted while selecting.
inactiveSelection: Background color of selections when not in focus.
wordHighlight: Background color of a symbol during read-access, like reading a variable.
wordHighlightStrong: Background color of a symbol during write-access, like writing to a variable.
findMatchHighlight: Background color of regions matching the search.
currentFindMatchHighlight: Background color of the current region matching the search.
findRangeHighlight: Background color of regions selected for search.
linkForeground: Color of links.
activeLinkForeground: Color of active links.
hoverHighlight: Background color when hovered.
referenceHighlight: Background color of a reference when finding all references.
guide: Color of the guides displayed to indicate nesting levels.
You can find an example VS Code theme here which includes the custom
settings.
As we can see here, there is no special override for the references pane.
We can, though, see in the code that the dark blue for dark themes and the light blue for light themes that you're seeing in the references pane is a default value set in code here.
The colours for the UI itself are stored in the following file (ubuntu): /usr/share/code/resources/app/out/vs/workbench/electron-browser/workbench.main.css
You can edit that, or wait for March 2017 where a new version will be released which will allow customising these colours more easily.
Revisiting this in Sept/2022 out of necessity, I confirmed VS Code 1.70 has native support for manipulating colors for the Go to References/Definitions and Peek... overlays.
Change the overlay background and border as follows, but there's lots of other settings too; see peekView*
"workbench.colorCustomizations": {
"peekViewEditor.background": "#01041a",
"peekViewResult.background": "#054c8a",
"peekView.border": "#04fafa"
All the VS Code default themes (and any others that I've seen) have a uniform background color between the main view and the gutter. This makes it really hard to tell if you're at the start of a line (or to click there). Is the cursor at the start of the line here?
This is especially annoying with Python where indentation matters and you can't simply auto-indent a block once your indentation is messed up.
I often find myself pasting a block only to find that I was one space away from the start of the line and the pasted block therefore being offset.
Simply setting the gutter to a light grey background would fix this problem but looking at the default theme files I can't see any settings for the gutter. I've also looked at a theme from the store (Material) which has a few keys relating to gutter colours but changing them did not do anything.
Is there any way to modify the gutter background colour in VS Code?
Update: Version 1.8 of VS Code comes with a new setting to render the line highlight which can help with this when set to 'gutter':
You can change the gutter's background color (or colour) in settings.json. This was added in May.
"workbench.colorCustomizations": {
"editorGutter.background": "#000000" // your color here
}
or you can add
"editor.rulers": [ 0 ]
This won't change the background but it will add a line between the gutter and the editor.
The problems is that the gutter pointers are just not enabled by default.
Open preferences, workspace settings and set
{
"editor.renderIndentGuides": true,
"editor.renderWhitespace": "all"
}
You should see the guidelines and whitespace, hope it helps.
For more settings like this check -> https://code.visualstudio.com/Docs/customization/userandworkspace
Please install 'Python For VSCode' extension to solve the indentation issue.
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
First of all, there is already a similar question, but these answers don't help.
As already mentioned in the topic, I'd like to modify the color of the inactive line in code assist (without changing other areas) because white on light grey background is hardly seen.
"Colors and fonts" just contain "Content assist foreground/background color", this only changes the foreground/background of the whole code assist but not of the active or inactive line. There doesn't seem to be an option for this. Is it possible to change this in a different way, maybe with some kind of stylesheet?
After tinkering around for hours I found the solution. The related GTK class is GTKTreeView, the corresponding widget state is base[ACTIVE]. Unfortunately, a color change will affect other GTKTreeViews in Eclipse too (e.g. the tree view in project explorer, but for me it doesn't matter). I've set the background color of the list items to hex #AAAAAA so their look is a little bit darker now. I saved these settings als .gtkrc-eclipse in my home dir:
style "eclipse" {
font_name = "Sans Condensed 8"
}
style "listitem" {
base[ACTIVE] = "#AAAAAA"
}
class "GtkWidget" style "eclipse"
class "GtkTreeView" style "listitem"
..and the command of my Eclipse launcher looks like this:
env GTK2_RC_FILES=/usr/share/themes/Ambiance/gtk-2.0/gtkrc:/home/myuser/.gtkrc-eclipse '/opt/eclipse/eclipse'
I'd say it's system-dependent. Try playing with system default colors on Preferences > Appearance > Customize > Colors. Depending on your Ubuntu theme the font could be unreadable sometimes.