CODEWITHSUNDEEP
visual-studio-code
Amelio Vazquez-Reina
Amelio Vazquez-Reina

Reputation: 96350

Highlighting better the current editor group

Does VSCode provide a way of highlighting the current editor group (or tab) in focus?

For example:

enter image description here

Upvotes: 5

Views: 1190

Answers (4)

Looser
Looser

Reputation: 1

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",
    },

Upvotes: 0

scottwillmoore
scottwillmoore

Reputation: 560

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.

Screenshot of CSS in action.

Upvotes: 3

Mark
Mark

Reputation: 181916

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://stackoverflow.com/a/76980603/836330 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).

Upvotes: 2

Morgan Thibert
Morgan Thibert

Reputation: 41

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

Upvotes: 4

Related Questions