I am using Cobalt2 theme in VS Code which is perfect for me. There is only one issue that I have with this theme, that would make me try changing it. Its the color of params in terminal, which is a dark blue on black - very hard to see. Does anyone know how to change this? What this element is called in a custom theme? Thanks for your help.
A small screenshot of what I mean:
Examples: gulp serve --config, ng serve --port ...
Its about the --params and their color
This is an easy way to customize the text colors of the integrated terminal in VSCode, so there's no need to change the theme itself. You can simply overwrite the default colors.
Just add this line to your settings.json:
"terminal.integrated.drawBoldTextInBrightColors": false
Then you'll be able to overwrite the default colors and change them to the colors you want to see instead:
"workbench.colorCustomizations": {
"terminal.ansiBlack": "#50ff00", //this overwrites black colors with green
"terminal.ansiBlue": "#ff0000", //this overwrites blue colors with red
...
}
Let's say you want to change the terminals black colors into another one (for example green), you'll have to asign "#50ff00" to "terminal.ansiBlack". As you can see below, there are a few more colors you can change (make use of IntelliSense).
It should look like this:
Related
Editing Python source in VSCode, I notice some color themes highlight use of {braces like this} in non-f-strings. Others don't.
Such highlighting is useful - it often marks error where the string was supposed be an f-string but isn't.
The "Dark+ (default dark)" theme looks like this:
The "Dark (Visual Studio)" theme looks like this (same color for plain string and brace):
How can I change the highlight color for {foo2} in the color theme? I want to make it much more prominent so I'll notice it.
I think changing this requires something in editor.tokenColorCustomizations in settings.json, but what setting in there corresponds to the {foo2} syntax?
See the black dot..??
I see a badge on the editor's tabs showing that somthing has been modified. I use to see other badges that showed errors, however, I don't see them anymore. What setting do I use to enable the badges to show errors?
How we see the black badge for a tab where changes have been made, similarly, it would show a red badge (large dot) for the tabs(files) with errors. Now I can't see those. Also, I would like to set custom colour for it.
You can customize your active Visual Studio Code color theme with the workbench.colorCustomizations user setting.
{
"workbench.colorCustomizations": {
"activityBar.background": "#00AA00"
}
}
Color Formats
*Color values can be defined in the RGB color model with an alpha channel for transparency. As format, the following hexadecimal notations are supported: #RGB, #RGBA, #RRGGBB and #RRGGBBAA. R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, a-f or A-F). The three-digit notation (#RGB) is a shorter version of the six-digit form (#RRGGBB) and the four-digit RGB notation (#RGBA) is a shorter version of the eight-digit form (#RRGGBBAA). For example #e35f is the same color as #ee3355ff.
If no alpha value is defined, it defaults to ff (opaque, no transparency). If alpha is set to 00, the color is fully transparent.
Some colors should not be opaque in order to not cover other annotations. Check the color descriptions to see to which colors this applies.
*
This should be what your looking for, let me know if they work, and which one in particular fixed your issue so we can edit your question and write it to properly address the issue your having.
{
// Make sure the tab extends where the button & modified icon is #
"workbench.editor.tabCloseButton": "right",
// Turn on badges & colors for the Source Control decorations
"workbench.editor.decorations.badges": true,
"workbench.editor.decorations.colors": true
// Bonus: If you want them turned on in your File explorer too, use this:
"explorer.decorations.badges": true
"explorer.decorations.colors": true
}
I've installed iceberg theme extension on vscode, and spend decent amount of time to figure out how to change the color of line number in the way to be the same like code section background color. What I have
I want something like in dark+ (default dark) where both sections have same color
What I would like to have
Is it possible to override only line number column color?
You can add these to your settings.json:
"workbench.colorCustomizations": {
"editorLineNumber.froeground": ,
"editorGutter.background": ,
"editorCursor.foreground": ,
},
Choose the color you like and save the changes. Hope hepful.
there are 2 workbench colors for line numbers
editorLineNumber.foreground
editorLineNumber.activeForeground
Set both color names to the same color in your settings.json file specific for this theme.
After some more searching I found editorGutter.background responsible for setting that thing
I have checked the Official Doc about theme settings, after trying too many times, I haven't made it. I want to change the text color(not background color, just the words color), which profile should I edit?
I have spended a few time and solved it. Edit your settings.json as below:
"workbench.colorCustomizations": {
"list.focusForeground": "#00ff00",
},
Replace the color(hex) as what you want, the example code color #00ff00 is green.
BTW, how I get this settings:
Toggle developer tools(In vscode dropmenu of help)
Try to find div where you want change, and get the color, for example (#eeffff)
command + shift + p, and input Generate Color ... will show Generate Color Theme From Current Settings, select it would open a new file with full color configs.
copy all colors json code block to settings file which match key of workbench.colorCustomizations
search #eeffff and try to find relative key, if not sure, change color and try to see the color in your code.
find out list.focusForeground is right. And keep this settings, remove other.
It might spend less or more time, but it works.
I'm trying to change the color of a current line in a debugging mode.
So, I know how to change color in general, but don't know what is the name of the parameter.
for example, to change a selected line we need "editor.lineHighlightBackground"
"workbench.colorCustomizations": {
"[Base16 Dark Oceanic Next]": {
"editor.lineHighlightBackground": "#ff0000",
}
}
but, how to change the line color which appears during debugging?
Write the customization without "[Base16 Dark Oceanic Next]" as :
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#ff0000",
}
For anyone interested in how to do this in Tools > Options > Environment > Fonts and Colors.... Change the background color for the Text Editor > Display Item called "Current Statement."
If editor.lineHighlightBackground doesn't do what you want, try editor.stackFrameHighlightBackground.