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
},
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"
}
}
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
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.
Visual Studio Code has a feature where it will change the color of a filename in the file tree when there is a linting error. Unfortunately the error color looks a little harsh for me:
Is there a way I can change the error color here? I know I can disable it completely with problems.decorations.enabled, but I would prefer to have them enabled, but just not be so hard on the eyes. I've gone through the theme customizations available here, but I haven't found anything related the the problems.decorations.
There are two other settings you can look at:
"explorer.decorations.colors": false,
"explorer.decorations.badges": false
and some colorCustomizations (see git decorator colors)
Git Colors
gitDecoration.modifiedResourceForeground: Color for
modified git resources. Used file labels and the SCM viewlet.
gitDecoration.deletedResourceForeground: Color for deleted git
resources. Used file labels and the SCM viewlet.
gitDecoration.untrackedResourceForeground: Color for untracked git
resources. Used file labels and the SCM viewlet.
gitDecoration.ignoredResourceForeground: Color for ignored git
resources. Used file labels and the SCM viewlet.
gitDecoration.conflictingResourceForeground: Color for conflicting git
resources. Used file labels and the SCM viewlet.
However, there doesn't seem to be a way to change the color of the problem colors. Modified, untracked and ignored all work fine though. You can change the file name color back to uncolored with the
"explorer.decorations.colors": false,
setting.
Try with:
"list.errorForeground": "#00AA00"
This will change the color to green ("#00AA00").
In my case, I used it to add color to the High Contrast Theme because, for some reason, it was missing the error color in the file explorer.
Here's what I changed for that specific theme:
"workbench.colorCustomizations": {
"[Default High Contrast]": {
"list.errorForeground": "#00AA00"
}
}
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