I'm going crazy here trying to figure out how to customize the token colors in my vs code editor. I'm using the "Material Theme Lighter High Contrast" but I want to change the color of the "Type" tokens. So I changed my settings.json file to include the following:
"editor.tokenColorCustomizations": {
"[Atom One Dark]": {
"comments": "#a2ffe3d8"
},
"[Material Theme Lighter High Contrast]": {
"functions": "#00ff4c"
}
},
After changing the settings I go to reload my window and for a couple of seconds I can see the color change to the new setting but then it goes right back to the awful yellow. Any ideas what's going on?
Thank you everyone for all the help. After hours of spending way too much time trying to figure out this theme stuff instead of working on my actual project, I have finally figured out the problem. When you use enhanced colorization you can't use the normal token types. See here for more info https://code.visualstudio.com/docs/cpp/colorization-cpp
Related
Is it possible programmatically to detect if the current theme is light or dark in VSCode?
Use Case:
I am developing a VSCode extension which is going to add Hovers to the editor, and I would like to have icons in the hovers. However, the background of the hover changes based on the current colour theme, so I need to choose the icons to display based on the colour theme.
Several other places in VSCode you are able to specify icons urls in the form:
let icon = {
light: "uri for light icon",
dark: "uri for dark icon",
};
so clearly VSCode has a notion of light vs dark themes.
This is similar to this question but AFAIK that answer only applies to webviews, and this issue is also brought up in this VSCode issue after it was closed
As of VS code 1.40, there is no API for this. Please file a feature request.
If you really, really want this info today though, you can read the current user's "workbench.colorTheme" setting and map this to dark/light. Instead of hardcoding this mapping, look it up by looping through the contributes of all known extensions using vscode.extensions.all.map(ext => ext.packageJSON). Here's an example theme contribution (the property you are interested in is uiTheme):
{
...
"contributes": {
"themes": [
{
"label": "Red",
"uiTheme": "vs-dark",
"path": "./themes/Red-color-theme.json"
}
]
}
}
Something like this:
I've always liked the way Sublime Text looked and I wasn't able to reproduce this sorta theme in VS Code. Editing the workbench settings does not really achieve the same result. I end up having a light text on a slightly darker sidebar: which is pretty hard to read.
These will get you closer:
"sideBar.foreground": "#000",
"sideBar.background": "#ccc",
// "gitDecoration.modifiedResourceForeground": "#000",
You may need to modify all the gitDecoration colors to work on a light background.
I haven't figured out a way to darken the arrows for the folders yet though. You would think they would be set by the sidebar.foreground property but apparently not.
And I just noticed that the sidebar properties also control the command palette colors!
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.
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'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