microsoft / microsoft/vscode

Allow Windows native title bar colors to follow VS Code theme colors

Open
#329,187 0 comments 0 reactions 2 assignees Claimed by @hawkticehurst View on GitHub
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

VS Code already provides theme colors such as:

- `titleBar.activeBackground`
- `titleBar.inactiveBackground`
- `titleBar.activeForeground`
- `titleBar.inactiveForeground`
- `titleBar.border`

However, when using the native Windows title bar overlay, these colors do not control the native Windows title bar overlay background or window control colors.

For example, with the following configuration:

```json
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#000000",
"titleBar.inactiveBackground": "#000000",
"titleBar.activeForeground": "#FFFFFF",
"titleBar.inactiveForeground": "#FFFFFF",
"titleBar.border": "#000000"
}
````

the VS Code workbench correctly applies the configured colors to its HTML/CSS-based UI, while the native Windows title bar overlay remains gray.

The VS Code workbench correctly applies the configured theme colors, including `titleBar.activeBackground`, `titleBar.activeForeground`, and related theme tokens. However, the native Windows title bar overlay rendered by Electron does not consistently inherit these values and continues to use a separate gray background.

This creates a clear visual discontinuity between the themed VS Code workbench and the native window chrome, even when the user explicitly configures the title bar background to `#000000` and the foreground to `#FFFFFF`.

Native Windows title bar remains gray despite the configured theme colors

It would be useful if the existing `titleBar.*` theme colors were applied to Electron's native `titleBarOverlay` on Windows, or if an equivalent configuration option were provided.

### Investigation and proof of concept

I investigated the native window behavior using PowerShell and the Windows DWM API to determine whether the title bar was controlled by the VS Code workbench DOM or by the native window chrome.

The VS Code window was identified through its native `HWND`, and `DwmSetWindowAttribute` from `dwmapi.dll` was used to test native Windows window attributes such as caption color, border color, text color, and immersive dark mode.

The native DWM calls returned `0` (`S_OK`), confirming that the attributes were being accepted by the window.

I also inspected the VS Code workbench DOM. Changing the background of `.window-controls-container` through DevTools did not change the visible native title bar background, indicating that the relevant window chrome is controlled outside the workbench DOM.

Finally, I inspected the bundled `resources/app/out/main.js` shipped with VS Code and found that the Windows window creation code configures Electron's `titleBarOverlay`:

```js
if (isWindows) {
c.titleBarOverlay = {
color: "#000000",
symbolColor: "#FFFFFF",
height: 35
};
}
```

The runtime also updates the overlay through Electron's `setTitleBarOverlay()` API.

As a proof of concept, I temporarily patched the bundled `main.js` so that the runtime call uses fixed colors:

```js
t.setTitleBarOverlay({
color: "#000000",
symbolColor: "#FFFFFF",
height: e.height ? e.height - 1 : void 0
});
```

I used the following PowerShell script to locate the active VS Code installation, create a backup, and apply this modification:

```powershell
$base="$env:LOCALAPPDATA\Programs\Microsoft VS Code";
$p=(Get-ChildItem "$base" -Recurse -Filter main.js -File -ErrorAction SilentlyContinue |
Where-Object {$_.FullName -match '\\resources\\app\\out\\main\.js$'} |
Sort-Object LastWriteTime -Descending |
Select-Object -First 1).FullName;

$c=Get-Content $p -Raw;

$o='t.setTitleBarOverlay({color:s?.trim()===""?void 0:s,symbolColor:a?.trim()===""?void 0:a,height:e.height?e.height-1:void 0})';

$n='t.setTitleBarOverlay({color:"#000000",symbolColor:"#FFFFFF",height:e.height?e.height-1:void 0})';

if($c.Contains($o)){
Copy-Item $p "$p.bak" -Force;
$c=$c.Replace($o,$n);
Set-Content $p $c -NoNewline;
Write-Host "Title bar patch applied to $p" -ForegroundColor Green
}else{
Write-Host "Already patched or target code was not found." -ForegroundColor Yellow
}
```

After restarting VS Code, the native Windows title bar correctly uses the requested black background and white window controls:

After manually modifying Electron's `titleBarOverlay` configuration in `main.js`, the native Windows title bar uses the requested black background and white window controls.

This demonstrates that the desired appearance is technically achievable with the existing Electron title bar overlay mechanism. The issue is that this configuration currently requires modifying VS Code's bundled `main.js` rather than being controlled through the existing VS Code theme color system.

Native Windows title bar after patching titleBarOverlay

### Expected behavior

The existing `titleBar.*` theme colors should be reflected in the native Windows title bar overlay, for example:

```text
titleBar.activeBackground → titleBarOverlay.color
titleBar.activeForeground → titleBarOverlay.symbolColor
titleBar.inactiveBackground → inactive native title bar background
titleBar.inactiveForeground → inactive native window control color
```

Alternatively, an explicit configuration option for controlling the native Windows title bar overlay would provide a consistent way for users and theme authors to customize it.

This would allow users and theme authors to create a fully consistent title bar without modifying VS Code's installation files or patching `main.js` manually.

### Environment

* VS Code: `1.131.0` (User Setup)
* Commit: `e4c7e7b1d6d060162f4aa7f8225271b67ce1df75`
* Electron: `42.7.0`
* Chromium: `148.0.7778.280`
* OS: Windows 11 x64
* OS Build: `26200`

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.