How to modify the theme in VS Code - visual-studio-code

This is not a duplicate of how to configure theme options, that is clear from answers like this.
I'd like to modify or tweak the current setting, meaning: I'd like to load what is currently configured. For example the value currently configured for
editor.tokenColorCustomizations["[Cobalt2]"]["comments"]["foreground"]
to be able to tweak it a bit, say making the color more bright.
When I load this key in the User Settings I see a color red ("#FF0000) as default, which is obviously not what the theme has.
I know I can 1) open the cobalt2.json 2) find the setting and 3) copy/paste in my User Settings. But I was looking for a more friendly/easier approach.
Is there a more friendly/easier approach? How can I preload the current setting in my User Settings?

You can use this command from command palette:
Developer: Generate Color Theme From Current Settings
to see all the colors defined. If you have overwritten some colors in settings.json that change will be reflected too.
Command to assign to a keybinding: workbench.action.generateColorTheme.
Also, there is an open issue to fill the current value in settings: #25633

Related

VS Code - where to find every available settings.json configuration option?

Where I can find good documentation for every available settings.json configuration option so I can configure VS code however I like to?
There isn't an official maintained list of everything, but you can find some guides in the VS Code Documentation.
For theme color reference, you can see the list at Theme Color documentation.
The closest to what you want may be pressing Ctrl+, (or by using the gear menu in the bottom left), you can open a GUI that will show all configurable settings and allow you to search them. For some things, it will tell you to edit it in the settings.json instead, though. In which case, you may need to to look at the documentation for usage instructions.

Make some personalizations in vscode specifically for some theme

How to make some customization in vscode settings like font size and font weight specific for some theme. For e.g -> I want to do fontsize 15 for one theme but when I change to another it's fontsize should be 12, I mean for exmple :).
The easiest way to do so is to directly change the VSCODE font-size settings by going to
File->Settings->Searching Font-size->Changing it or Ctrl+, and doing the same process
You could also go to Font switcher extension and download it and directly type F1->Font size
And lastly, I think it seems no such feature exists for changing the font size according to the theme unless and until you are able to get very specific info such as some unique id or something about the theme you are using and apply certain code to your settings.json you may be able to modify it.

VS code theme color is changed automatically

Above is today's color theme. Please see variable name SideMenu.
And another one is a picture which is taken few days ago.
You can see SideMenu color is different. It's not a problem of styled-components theme. Because every static variable's name's colors are changed.
It's not first time. few weeks ago, I had this experience and it's very annoying. Why the color theme of vs code (This is default Dark+ Theme) is changed automatically? I feel very unfamiliar with this color, and I want to stop the changing and hope to go back previous color.
How can I do that and Why this happens?
Ah! This is due to activation of Semantic Highlighting
You can disable or enable it to to get the coloring you want. Usually its enabled for default themes. If you disable it, you will get your old colors back.
You can disable/enable it here
Or you can add "editor.semanticHighlighting.enabled": false to settings.json
The is an option explorer.autoReveal in settings (either user or workspace) which controls if the explorer should automatically reveal files when opening them.
Open VS User Settings (Preferences > User Settings). This will open two side-
by-side documents.
Add a new "explorer.autoReveal": false setting to the User Settings document
on the right if it's not already there. This is so you aren't editing the
Default Setting directly, but instead adding to it.
Save the User Settings file.
Please enter your settings.json file for clear question. There might a code snippet like "workbench.preferredDarkColorTheme": "Default Dark+ Experimental" or "workbench.colorTheme": "so and so" in the settings.json. You have to remove this, because this might set your default theme to some preset theme. So, you will not be able to change your Color Theme on a fresh start.

VS Code terminal colors are screwy

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.

How do I set different color schemes with multiple vscode windows open

I have two windows open for debugging. One is for my service and the other is for my workbench. They are two different repos so I want them on two different instances of VSCode. I also want to have them be different color schemes. When I change the color scheme in one instance it applies to the other. Is there a way around this? Is there a way to have multiple windows be different color schemes in vscode?
You can configure the different title-bar color using .vscode/settings.json.
(For configuring different color themes, I don't know yet.)
{
"workbench.colorCustomizations": {
"activityBar.background": "#5D0D15",
"titleBar.activeBackground": "#82131D",
"titleBar.activeForeground": "#FEFBFB"
}
}
But, you can easily use the plugin called Window Colors which automatically generate .vscode/settings.json based-on the directory name like hash.
Actually I hope that the color will be better, but nowadays it can be very handy solution.
https://marketplace.visualstudio.com/items?itemName=stuart.unique-window-colors
Changing user settings changes all open instances color theme of VSCode which we do as below.It does not serve the purpose.
Instead use Workspace settings (Ctrl+Shift+P and type Workspace) and edit the color to your choice. Now it should get changed only to the opened instance.Mark in his comment already made this point , I am just elaborating it.Thanks Mark.
There is a Visual Studio Code extension called Peacock which helps to do this:
https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock