In the explorer sidebar, if the file has no errors then the colour is green, if the file has errors it turns red. Is there a way to change the colours for when there are errors?
I believe what you're looking for is to add the following setting into your settings.json:
{
"workbench.colorCustomizations": {
"gitDecoration.conflictingResourceForeground": "#00AA00"
}
}
You can find more info about changing colors to certain elements (specifically git related elements) here in the offical VSCode documentaiton - https://code.visualstudio.com/api/references/theme-color#git-colors
Related
I'm using Monokai Pro as my color scheme in VS Code. When VS Code greys out the names of the folders that are found in the .gitignore file, the text color becomes incredibly difficult to read.
For example, I had the /node_modules folder (circled in red) written inside my .gitignore file and VS Code would grey out the node_modules text in the Explorer.
When I expand the folder, all the sub-folders' names are greyed out but the text is very difficult to read.
I would like to edit the color of the greyed out file names inside the VS Code JSON settings. I'm aware that I can make customizations to a color scheme as found in the documentation here. However, I'm not sure which JSON property targets the greyed out file names inside Explorer.
"workbench.colorCustomizations": {
"[Monokai Pro]": {
// What should I write here?
}
}
It looks like this is the one:
"gitDecoration.ignoredResourceForeground": "#ff0000"
so
"workbench.colorCustomizations": {
"[Monokai Pro]": {
"gitDecoration.ignoredResourceForeground": "#ff0000"
}
}
How come some of the text is not well seen?
This never happened previously and I searched for settings in the preferences menu, but am currently at a loss as to what the root issue is.
Any suggestion/help would be greatly appreciated.
You can customize your color scheme in the JSON format of VS Code Settings so that the text in the side bar can be seen more easily.
First, open Command Palette via Ctrl + Shift + P and type Preferences: Open Settings (JSON). Press enter such that the VS Code Settings JSON file would open.
Next, add the following code into the JSON file:
"workbench.colorCustomizations": {
"[your_color_scheme_name_here]": {
"sideBar.foreground": "#ffffff",
}
}
Replace the your_color_scheme_name_here with the name of your color scheme. For example, if my color scheme is called Monokai Pro, then I type "[Monokai Pro]": { in the second line of the code snippet. Next, replace the #ffffff color code with a color you wish to have. Save the JSON file and you should be able to see the changes immediately at the side bar.
You can learn more about what other color customizations you can make in the side bar in the official documentation here.
It seems to be a bug in VS Code, I ended up just restarting the application and the issue was fixed. Strange to say to least...
Edit:
This was caused by git decorations which changed the color of the text name depending on the file status (modified, added, staged, etc.).
Since I find this distracting rather than helpful, I simply did file > preferences > settings > searched "git decorations" > unchecked "Git > Decorations: Enabled"
I am not a huge fan of the peach color in the explorer for modified files. Searching through the color theme reference I can't seem to find an override..
https://code.visualstudio.com/docs/getstarted/theme-color-reference
I've even tried disabling extensions and I am still seeing those predefined colors.. I am using the Monokai Soda theme but that doesn't seem to be what is setting those colors in the sidebar..
Any help appreciated - it's kinda driving me crazy..
ANSWER
Needed a combo of error style and git overrides, see answer below:
"workbench.colorCustomizations": {
"list.errorForeground": "#b3e5ec",
"list.warningForeground": "#00d9ff",
"gitDecoration.modifiedResourceForeground": "#00ffb3",
"gitDecoration.untrackedResourceForeground": "#f7aeae"
}
Turns out that the colour you're seeing isn't due to modified content. It's due to having problems/errors in your file. If you hover over the file name you should see x problems detected in this file.
To change the colour of those, you can use
"workbench.colorCustomizations": {
"list.errorForeground": "#00AA00"
}
The colour for modified files looks like the colour that settings.json is highlighted in, aka light green.
I am having a hard time changing the foreground color for the 'problem files' in visual studio as shown below. The default color is black as shown in the snapshot below (look closer at the in 'index.js' file in the file explorer).
I will like to change the foreground color from black to any color so it the file can be visible when I use a darker theme. Can anyone help, please?
From vscode 1.24 the colors for file explorer can be assigned separately from editor warnings:
"list.errorForeground": "#f66",
"list.warningForeground": "#ff6",
Here is the answer I got from the sonar community.
Sonar Source Community
Add this to the settings.json file in your workspace.
"workbench.colorCustomizations": {
"editorWarning.foreground": "#757575", // Warnings inside the file
"editorError.foreground": "#f66", // Errors inside the file
"list.warningForeground": "#757575", // Warnings on the file name
"list.errorForeground": "#f66", // Errors on the file name
},
I build a project and get some problems in the "Problems view", I click on the problem to see a line of code with that problem highlighted.
And it gets highlighted indeed. However, if dark-styled theme is used, highlight is, for me at least, really hard to notice (line 23 is highlighted):
I guess this color can't be simply hard-coded somewhere since it's different in, for example, red theme and light-styled themes:
Is there a way to change this color?
UPD: This question is not a duplicate of "change the error style"; error style (squiggle) applies to all errors at once, my question is about highlighting only the selected error.
Apparently, you can actually change it without using an extension. I created an issue and got the answer that this color is called editor.rangeHighlightBackground and you can override it in your User Settings (settings.json) by:
{
"workbench.colorCustomizations": {
"editor.rangeHighlightBackground": "#00AA00"
}
}
To open User Settings just use Cmd+, on mac or Ctrl+, on windows
A wrapup answer:
For VS Code 1.52+
You can use this snippet to customize error colors:
"workbench.colorCustomizations": {
"editorError.background": "#ff80ab66",
"editorError.foreground": "#d50000",
}
Available properties: https://code.visualstudio.com/api/references/theme-color
Check if you can apply a different theme with VSCode 1.52 (Nov. 2020), considering the new feature:
Error background colors
Theme authors can now leverage new theme colors for errors in the editor.
Edior errors, warnings, and infos can now be styled via:
editorError.background
editorWarning.background
editorInfo.background