Is it possible to change the linting error color in VS Code in the tree? - visual-studio-code

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"
}
}

Related

Visual Studio Code: How to change color of modified repository?

I work with over 30 to 40 repositories and submodules in a visual studio code. All this repositories are shown as source control. I want to highlight modified repositories in source control by changing their colors. Right now i could not find any option to change colors of modified repositories. How to change the colors of this repositories in source control.
Changed repositories right now show a simple asterick (*) mark near branch name. How to change its color for better highlighting.

VS Code - file explorer, how to change the text colour for files with errors

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

VSCode: Increase opacity of linter warnings

I resently switched to Visual Studio Code as my editor. I installed my favorite theme "Material Theme Palenight High Contrast". I'm in love with it. There is just on problem, that really hinders me when coding on my laptop.
The squiggly lines of the linting error are super dark, because they have opacity.
As you can see here, one can barely see the error below item. Is there a way to change the opacity of linting errors?
EDIT: I tried setting workbench.colorCustomizations but that caused my theme to disappear.
Edit 2: I tried setting the theme specific settings like this:
"workbench.colorCustomizations": {
"[Material Theme Ocean High Contrast]": {
"editorError.foreground": "#ff0000"
}
},
but it didn't work. The color of the squiggly stayed the same.
The instructions on the theme page you linked say to use editor.colorCustomizations, not workbench.colorCustomizations. Have you tried that?
There's also a bit above the link I gave that talks about setting the accent color. They don't define what "accent color" means, so I'm not sure if that color is the thing you're trying to change, but you might try it.
I was able to find a fix. Go to the place where your extensions are installed:
/Users/user-name/.vscode/extensions/extension-name/themes/theme-name.json
In that file find the values for editorError.foreground and editorWarning.foreground. Here you can overwrite their values and it will work.
I'm just asking myself, whether this should be an issue for the VSCode repository? Since setting the settings in the user settings should overwrite this. One shouldn't have to change this .json file. Especially since this will change back again, if you re-install the theme.
Dummy Edit 🤦🏻‍♂️:
Damn, I accidently wrote Oceaning insteand of Palenight. The color customizations work... My bad. No need to do this hacky trick I described above.

VS Code changing modified file colors in Explorer

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.

VS Code: change foreground color for files with problems in the file explorer

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
},