Highlighting better the current editor group

Question

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

Bradawl

Answer 1

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.

---

You might also be interested in https://mcmap.net/q/2031323/-how-can-i-change-the-background-color-of-the-editor-in-focus-in-vs-code which shows how to dim editors and terminals that are unfocused. It doesn't explicitly work on editor groups but the effect is similar - make a focused editor more obvious (by reducing the opacity of other editors and the terminal).

Ha

Answer 2

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

Borlow

Answer 3

I also want a solution to this issue... I do have a solution which might be "good enough", at least for now. You need to use an extension such as Custom CSS and JS Loader to load your own CSS. I was able to construct these styles which highlight the active editor group.

.editor-group-container.active:before {
    content: "";
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid red;
    pointer-events: none;
}

With this basis, you can modify the CSS to highlight other containers in the editor such as the side bar, or the activity bar when they contain an element in focus.

:is(
    .editor-group-container,
    #workbench\.parts\.sidebar,
    #workbench\.parts\.activitybar,
):has(:focus):before {
    content: "";
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid red;
    pointer-events: none;
}

You may want to adjust this CSS. At the moment the activity bar doesn't work, as there is already a :before element.

Burnsed

Hi! I tried this but could not manage to get it to work. Do I just copy put the css you have in the second codeblock and put in a css file? There is nothing else I need to add to the css? (which I then reference as per the extensions instructions) Screenshot of what I got: imgur.com/a/5LDsC9g – Wadesworth

Answer 4

another solution might be something like this:

    ".monaco-workbench .part.editor>.content .editor-group-container": {
        "opacity": "0.6",
    },
    ".monaco-workbench .part.editor>.content .editor-group-container.active": {
        "opacity": "1",
    },

Nautical

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Sarmentose