In the image below I'm actually in "rename" and I'm highlighting something but there's no highlight. You'll notice there's no cursor as well because it's highlighting. This is driving me a bit bonkers because I'm either counting how many left/right arrow keys I'm moving and such to know where I am. I tried the following colors but none of these seem to do anything (in the Explorer):
"workbench.colorCustomizations": {
"editorRuler.foreground": "#fc199a22",
"editor.selectionBackground": "#ab3beb3f",
"editor.selectionHighlightBackground": "#136460e3",
"editor.findMatchBackground": "#00cc44a8",
"editor.findMatchHighlightBackground": "#d0ff004d",
"scrollbarSlider.background": "#FC199A2c"
},
I tried inspecting the element in the developer console in VS Code but the rename closes when it blurs out of the field which I need to do to select the element to know what the CSS class is to style it.
I didn't see a "rename" or highlight color for the explorer here either: https://code.visualstudio.com/api/references/theme-color#editor-colors
Any help would be super appreciated.
You can use the following property:
"selection.background" : "#FF0"
The background color of text selections in the workbench (e.g. for input fields or text areas). Note that this does not apply to selections within the editor.
A caveat to this approach is that it is applied globally, not just the explorer view
Related
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.
Latest update of VS Code changed color of at least one element I had customized for js via settings.json (entity.name.function.js). The color is changed for keywords like resolve, then, reject, bind, but not all function names(!). Other of my custom colors seem to remain unaffected. I did not change anything in the settings.json.
When I open the Developer: Inspect Editor Tokens and Scope option and select the elements of the code with incorrect color I see:
foreground entity.name.function.js { "foreground": "#9493DA" }
which suggests the custom color definition is recognized by VS Code, but not applied for some reason.
What can be the reason and how to make VS Code apply the desired styling?
Apparently the update changed classification of some keywords from support.function.js to support.function. After adding the latter to settings.json color was applied properly.
How can I replace this annoying white rectangle with anything nicer?
I tried to disable it in user settings using
"editor.matchBrackets": "never",
but it didn't work.
That highlighting appears to be editor.selectionHighlightBackground assuming you selected editor. There is also editor.selectionHighlightBorder you can change. Like so:
"workbench.colorCustomizations": {
"editor.selectionHighlightBackground": "#e90505",
"editor.selectionHighlightBorder": "#ff000080" // digits 7 and 8 are opacity
}
You can turn off this highlighting of selection matches by disabling this setting:
Editor: Selection Highlight
Such highlighting could also be the result of find matches. Please advise if that is what you used, the Find/Replace widget.
When I place my cursor on the extremity of a block (represented by the white drawn cursor on the picture below) VSC highlight both the ending and the starting symbol of that block.
The red line on the picture represent the starting and the ending of that block. Where can I set the option for VSC to automatically use a background color to highlight the current selected block ? (I am really more of a visual guy and I like to feel where's my current locations when I am coding.)
You are going to need an extension to do that, it isn't built-in. Try:
Indented Block Highlighting
I am not sure it supports all languages but see if it works in your case.
Bracket-pair-colorizer does something similar but more subtle. See "bracket-pair-colorizer-2.showHorizontalScopeLine".
.
And see How to change indent guide line color between brackets in VSCODE? - perhaps highlighting the active indent guide will be enough for you?
Using (in your settings.json):
"workbench.colorCustomizations": {
"editorIndentGuide.background": "#bbb",
"editorIndentGuide.activeBackground": "#f00e0e",\
}
I'm used to check all my changes before committing anything. Therefore I mainly use the keyboard this way:
Open the files diff-viewer
Use shortcut for command workbench.action.compareEditor.nextChange to navigate through all changes (Alt+Down in my case)
Unfortunately the currently "selected" change is very hard to distinguish from all others, which makes this workflow a little cumbersome:
I just realized that I could customize this by changing editor.lineHighlightBackground or editor.lineHighlightBorder but this would change the highlighting of the currently active line in all views which is not what I want.
Can I somehow customize editor.lineHighlightBorder only for the diff view?
Something like:
"workbench.colorCustomizations": {
"editorCursor.foreground": "#f9ae58",
"[diff]": {
"editor.lineHighlightBorder": "#fff",
}
},
In your colorCustomizations just type "diff" (without the quotes) and you will see various options like:
"diffEditor.removedTextBorder": "#ff0000",
"diffEditor.removedTextBackground": "#ff0000",
"diffEditor.insertedTextBackground": "#ff0000",
"diffEditor.insertedTextBorder": "#ff0000",
So no I don't think you can change the currently selected line only in the diffEditor. There is no such option. Also, the colorCustomizations do not support the language-specific settings like the other settings do. But maybe playing with the four options above will help?