CODEWITHSUNDEEP
visual-studio-codecustomization
My Email
My Email

Reputation: 11

How can I change the background color of the editor in focus in VS Code?

There are 3 files open and I want the background of the file I'm editing to be of a different color than the others so I can easily identify it.

As You can see in image that the cursor is in output.txt but its hard to know in first glance:

I tried looking through the descriptions for settings starting with "editor.", but all of those settings apply to every editor group that is open.

Upvotes: 1

Views: 2768

Answers (3)

starball
starball

Reputation: 52167

Since VS Code 1.82, you can dim inactive editors and terminals. Quoting from the release notes:

This can be enabled using accessibility.dimUnfocused.enabled and the amount of dimming is controlled with accessibility.dimUnfocused.opacity.

The feature only covers editors and terminals currently but the plan is to expand this to allow a user to configure what views they want to dim themselves.

It's not exactly what you're looking for, but it might be satisfying enough.

Aside from that, at the time of this writing, changing the background colours of editors is not supported.

This was previously brought up as a feature-request, but it didn't receive enough community support, so that feature-request was closed: Support color customizations for currently "active" editor or "focused" editor group #87083. I'm pretty sure it's okay to open a new, same feature-request. If you do, you can try to garner support for it by giving it visibility on other sites like reddit's r/vscode.

There was a similar feature-request that got resolved instead by adding the ability to customize the colour of the tab handle for the focused editor using tab.activeBackground and tab.unfocusedActiveBackground: Make the currently active editor more distinguishable from others #24586.

For your reference / learning purposes, I found that first GitHub issue ticket I linked as the first search result when googling "github vscode issues color customizations editor focus background".

Upvotes: 3

Mark
Mark

Reputation: 182771

Based on this issue: Dim or otherwise indicate "inactive" editor/terminal there is a pretty good option already available in vscode Stable v1.82 which allows you to dim (reduce opacity) of non-focused editors and terminals. So it doesn't change the background color of the active editor but dims all the other editors.

Here are the relevant settings:

Accesibility > Dim Unfocused: Enabled

> Whether to dim unfocused editors and terminals, which makes it more 
> clear where typed input will go.  This works with the majority of
> editors with the notable exceptions of those that utilize iframes like
> notebooks and extension webview editors.

Accesibility > Dim Unfocused: Opacity

> The opacity fraction (0.2 to 1.0) to use for unfocused editors and
> terminals.  This will only take effect when "Accesibility > Dim
> Unfocused: Enabled" is enabled.

Demo using an opacity of 0.4 with two editor groups and terminal:

dim unfocused editors and terminals

Upvotes: 0

Yarin_007
Yarin_007

Reputation: 1598

maybe this?

colors exaggerated on purpose

as you can see, the actual active pane is red, while the "active-but-unfocused" panes are blue.

Ctrl + Shift + P -> open user settings (json)

"workbench.colorCustomizations": 
{    
       "tab.activeBackground": "#ff0000",
       "tab.unfocusedActiveBackground": "#012bff"  
}

enter image description here

or this for a specific theme (Default Dark+)

"workbench.colorCustomizations": 
{
    
    "[Default Dark+]": 
    {      
       "tab.activeBackground": "#ff0000",
       "tab.unfocusedActiveBackground": "#012bff"
    }
}

Upvotes: 2

Related Questions