change background of the currently open file tab in vscode [duplicate] - visual-studio-code

Does VSCode provide a way of highlighting the current editor group (or tab) in focus?
For example:
Highlighting a bounding box around the group in focus with a separate color (illustration below)
Highlighting the current tab in the group in focus

for modifying the active tab see https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs. For example:
tab.activeBackground, tab.activeForeground and there a few more active/inactive color settings to modify in that link. They go in your settings colorCustomizations object like:
"workbench.colorCustomizations": {
"tab.activeBackground": "#ff0"
}
In general, https://code.visualstudio.com/api/references/theme-color is the resource for looking up what items can be modified in this way.
It doesn't look there is a way to differentiate an active from an inactive editorGroup except for a focused but empty editorGroup, with editorGroup.focusedEmptyBorder. You might find some other editorGroup colors useful though.

By using tab.unfocusedActiveBackground you can highlight inderectly the current active editor group:
"workbench.colorCustomizations": {
"tab.activeBackground": "#770000",
"tab.unfocusedActiveBackground": "#000033"
}
It is the best I have found yet.
View here

Related

Can the focused part of Visual Studio Code be outlined?

I avoid using the mouse for navigation as much as possible. Sometimes when I go back into VSCode via spotlight/raycast the focus will be on some element in the sidebar, or the terminal, or the vim cursor is just immediately obvious. Is there a way to enable some sort of obvious outline on the part of the UI that currently has focus so further navigation can be easier? I perused the settings but didn't see one that immediately stood out.
You can change the usual blue focus border (like you get with tabbing around the window elements) to another color, like red, with this setting in your settings.json:
"workbench.colorCustomizations": {
"focusBorder": "#ff0000"
}
For some elements like those that border on the window edge it doesn't help much. For others it helps.

VSCode - Change the background color of active item in explorer

I wanted to change the background color of the selected file in explorer in VS code and I found this setting list.activeSelectionBackground which you can see in the picture actually worked.
But the problem is that it only works when I click on the file explicitly but it doesn't when I switch to a different file using Alt+tab, then it looses the background color even when actually the file is selected in explorer.
After Alt+tab it starts showing the selection background like this, which is the default way
I tried some other settings like list.inactiveFocusBackground and list.focusBackground but they didn't work.
Any idea?
It looks like you want
"workbench.colorCustomizations": {
"list.inactiveSelectionBackground": "#fff",
"list.activeSelectionBackground": "#fff"
}
Just set them to the same thing so whether that Explorer item selection is active or not it will appear the same.

Can barely see vscode editor tab [duplicate]

Does VSCode provide a way of highlighting the current editor group (or tab) in focus?
For example:
Highlighting a bounding box around the group in focus with a separate color (illustration below)
Highlighting the current tab in the group in focus
for modifying the active tab see https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs. For example:
tab.activeBackground, tab.activeForeground and there a few more active/inactive color settings to modify in that link. They go in your settings colorCustomizations object like:
"workbench.colorCustomizations": {
"tab.activeBackground": "#ff0"
}
In general, https://code.visualstudio.com/api/references/theme-color is the resource for looking up what items can be modified in this way.
It doesn't look there is a way to differentiate an active from an inactive editorGroup except for a focused but empty editorGroup, with editorGroup.focusedEmptyBorder. You might find some other editorGroup colors useful though.
By using tab.unfocusedActiveBackground you can highlight inderectly the current active editor group:
"workbench.colorCustomizations": {
"tab.activeBackground": "#770000",
"tab.unfocusedActiveBackground": "#000033"
}
It is the best I have found yet.
View here

Is there a way to disable selection highlighting in VS Code?

Is there a way to disable this multi selecting in VS Code?
There are 3 settings you can configure to disable this.
1. Selection Highlight
"editor.selectionHighlight": false,
When you selected "open" (as in drag your cursor around the word), it also highlights all the "open"'s in the same file. You can disable this behavior from the settings UI or from the JSON file.
2. Occurences Highlight
"editor.occurrencesHighlight": false
This is supposed to prevent selecting all occurrences of a word when you click on it (i.e. when you click on "open", it should not highlight all the other "open"'s).
But, it can be a bit unreliable. It depends on the language and whether you have language-specific extensions installed that does not override it. See the discussion on it here: https://github.com/Microsoft/vscode/issues/5351
3. Selection Highlight Background
This last way is a bit of brute-force solution. You can change the color of the selection highlight to be transparent. (Technically, it would still be highlighted but you just won't see it.)
"workbench.colorCustomizations": {
"editor.selectionHighlightBackground": "#00000000",
}

Highlighting better the current editor group

Does VSCode provide a way of highlighting the current editor group (or tab) in focus?
For example:
Highlighting a bounding box around the group in focus with a separate color (illustration below)
Highlighting the current tab in the group in focus
for modifying the active tab see https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs. For example:
tab.activeBackground, tab.activeForeground and there a few more active/inactive color settings to modify in that link. They go in your settings colorCustomizations object like:
"workbench.colorCustomizations": {
"tab.activeBackground": "#ff0"
}
In general, https://code.visualstudio.com/api/references/theme-color is the resource for looking up what items can be modified in this way.
It doesn't look there is a way to differentiate an active from an inactive editorGroup except for a focused but empty editorGroup, with editorGroup.focusedEmptyBorder. You might find some other editorGroup colors useful though.
By using tab.unfocusedActiveBackground you can highlight inderectly the current active editor group:
"workbench.colorCustomizations": {
"tab.activeBackground": "#770000",
"tab.unfocusedActiveBackground": "#000033"
}
It is the best I have found yet.
View here