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.
Related
I would like to know what is the JSON setting to change the background colour of a VSCode Jupyter Notebook cell.
I found the VSCode Theme colour reference but I can't find the specific setting to do so.
I found the perfect colour theme but I would like to tweak the background colour cell just a bit.
For those interested the setting is:
"editorWidget.background": "#ff0000",
To find it, from the command palette I ran:
Developer: Generate Color Theme from Current Settings
This will create a new json document with ALL the elements currently affected by your current theme, from there I search for all the occurrences of the hex colour until I found the matching setting.
UPDATE: Please see Mark's answer below
Mark's answer is not comprehensive enough. Not sure if it is the best, please try.
In the settings.json -- can be found at File(Windows)/Code(Mac)>Preferences>Settings
Adding this into the json will work -- notebook's setting has to be put under the workbench.colorCustomizations.
"workbench.colorCustomizations": {
"notebook.cellEditorBackground": "#FFFFFF",
},
The rest of the settings you may follow Mark's guide above.
However, customizing the color background alone at jupyter notebook at vscode is not enough, i need the complete best settings including the font colors. Please share if you found the settings for all under notebook. Or can we change the notebook theme only but leaving the rest of vscode theme untouched?
vscode v1.59 is adding this colorCustomization:
"notebook.cellEditorBackground"
Also available:
"notebook.cellBorderColor"
Previously:
That theme color reference link doesn't seem to be kept up-to-date. See vscode Theme Color reference instead. There are a lot of notebook-related theme colors:
Notebook colors
including:
notebook.focusedCellBackground
notebook.selectedCellBackground
and many more.
I love the dash effect instead of the squiggles in the Neon Night VSCode theme, but some of the ui colors are a little bright for me. Anyone know how it is achieving the effect? I'm trying to apply the effect to a different theme, and have even downloaded/combed through the GH repo, but haven't managed to figure it out. My apologies if this has already been asked. If my google-fu is broken, please be kind.
Theme author here, this was also posted as an issue on the repo and I wrote the response on the issue.
Here's what I shared...
You want to use these selectors:
editorError.foreground: error squiggles
editorWarning.foreground: warning squiggles
editorInfo.foreground: info squiggles
https://github.com/chaseadamsio/vscode-theme-neon-night/blob/mainline/src/colors/editor.js#L42-L45
you can set these on your workbench too (so you can use your favorite theme without forking) by adding them to your settings.json like this:
{
"workbench.colorCustomizations": {
"editorError.foreground": "#f00"
}
}
You can read more about them here and search for "Errors and warnings".
I found the 'offending color'.
"editorUnnecessaryCode.border": "#FF8E8E"
I found this by binary elimination of the theme entries.
I think it is implemented with a text Decorator, because I could not find as a style of the span with the Developer Tools of VSC.
The dash decoration is usually created by the semantic code check. Squiggles are the result of syntactic checks. So it's not a theme speciality and would appear similar with other themes.
Hover with the mouse over the dash decoration to see what vscode suggests to do.
I'm using the default theme. The terminal's colors are impossible to read, make no sense, and are inconsistent. I've tried switching themes but they're terrible in all the themes.
Here's what it looks like in the default. Are you able to read my yellow input against the gray background? And why isn't there a black background everywhere?
I realize there are settings that can manually set the fore/background colors. But I'm thinking something is broken for me because of how screwy the terminal behaves.
For example, here's what I see when I first start the terminal, type a bunch of stuff, backspace to delete half of it, resize the terminal pane, then delete some more. Notice how some of the deleted spaces have yellow and some have gray. Also notice how the area where the CWD would be shown is all black.
Here are the contents of my settings.json file:
{
"window.zoomLevel": 0,
"git.enableSmartCommit": true,
"workbench.startupEditor": "newUntitledFile"
}
What needs fixing, and how?
Edit:
Just to satisfy your curiosity, I added this to my settings.json file:
"workbench.colorCustomizations": {
"terminal.foreground": "#ffffff",
"terminal.background": "#000000"
}
No joy:
There might be something wrong in your console settings, you might want to remove the content of HKCU\Console in your registry. Save it before, obviously, but there shouldn't be any side effect: it'll just be recreated with the default settings.
Okay, so here's a list of all possible settings that you could tweak in your terminal window colorscheme: (source)
"workbench.colorCustomizations": {
"terminal.background":"#1D2021",
"terminal.foreground":"#A89984",
"terminalCursor.background":"#A89984",
"terminalCursor.foreground":"#A89984",
"terminal.ansiBlack":"#1D2021",
"terminal.ansiBlue":"#0D6678",
"terminal.ansiBrightBlack":"#665C54",
"terminal.ansiBrightBlue":"#0D6678",
"terminal.ansiBrightCyan":"#8BA59B",
"terminal.ansiBrightGreen":"#95C085",
"terminal.ansiBrightMagenta":"#8F4673",
"terminal.ansiBrightRed":"#FB543F",
"terminal.ansiBrightWhite":"#FDF4C1",
"terminal.ansiBrightYellow":"#FAC03B",
"terminal.ansiCyan":"#8BA59B",
"terminal.ansiGreen":"#95C085",
"terminal.ansiMagenta":"#8F4673",
"terminal.ansiRed":"#FB543F",
"terminal.ansiWhite":"#A89984",
"terminal.ansiYellow":"#FAC03B"
}
Now for me, the colors of folder names was too bright over an even brighter background color that highlighted them and I couldn't read squat (that's because of my VSCode theme called NightOwl -- :P Sarah) so I thought (wrongly) to change terminal.background and terminal.foreground properties but that refer to the entire rendered window of the terminal.
Because these properties are actually named after Ansi Escape Codes, what I was actually looking for were these properties: terminal.ansiBlue for folder name text color and terminal.ansiGreen for folder name background highlight color.
As soon as I tweaked those, my terminal was good to go.
The way to do it is to just set all these settings and start removing or changing them to see which is which for your preference. K Thx Bye
Also beware that terminal.ansiGreen is used by git diff as a color to show additions.
On March 8th 2022 the default value for the integrated terminal "minimum contrast ratio" was updated from 1 (no effect) to 4.5 (minimal effect). Depending on your color settings and what is being displayed, this can cause your integrated terminal foreground colors to be wrong.
To disable this feature, override the default in your own settings.json file:
"terminal.integrated.minimumContrastRatio": 1
There are two solutions. Xavier's solution works, and mklement0's comment was also correct.
Solution #1
Do what Xavier said (and upvote his answer).
But, if you don't want to mess up registry settings (or if, like me, you have lots of registry settings nestled under the HKCU\Console root), then...
Solution #2
Get Windows 10 build number 18309 (or newer)
Join the Windows Insider Program
Make sure you're on a "ring" that includes a new-enough build. For me at this moment that meant joining the "fast" ring
Wait forever for updates to finish installing
Add "terminal.integrated.windowsEnableConpty": true to your settings.json
Restart terminals
Upvote mklement0's comment
...
Profit!
I am new to VS Code (and I'm trying to better my PowerShell skills) and have/had this same problem. Deleting all the Reg keys cited above related to colors seemed to fix it, but I believe the root problem is that VS Code seems to be trying to honor the color scheme set up outside the VS Code Terminal itself, from the shell. Really annoying and I'm not sure how to separate the two.
I had setup a blue background/yellow font scheme in PS prior to installing VS Code. That was the same color scheme the terminal in VS Code was displaying directly around the text.
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 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