# Visual Studio IDE Color Fixes

For true black theme, use Vanta Black theme.

But, it will bork several color settings that you have to correct.

Here's how to touch them up:

These settings corrected several overly bright or distracting elements in Visual Studio 2026 when using a very dark theme.

<p class="callout info">NOTE: Some settings require closing and reopening the IDE, to take effect.</p>

#### Fixing the IDE Empty Background Color

Open Tools/All Settings/Environment/Visual Experience/Theme Colors.

Scroll down to the EnvironmentHeader entry (They're not in alphabetical order), and change it to "FF282828".

#### Fixing the Solution Explorer Pane's Top Header Background Color

Open Tools/All Settings/Environment/Visual Experience/Theme Colors.

Scroll down to the EnvironmentBody entry (They're not in alphabetical order), and change it to "FF000000".

---

## 1. Active document tab background

### Problem

The selected document tab had a white background, making the filename, pin, and close button nearly invisible.

### Navigation

1. Open **Tools → Options**.
2. Select **Environment → Visual Experience**.
3. Open the **Theme Colors** or **Shell Colors** page.
4. Find:

```
EnvironmentTab
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--2"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--3"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>### Value

```
FF282828
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--4"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--5"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>The format is:

```
AARRGGBB
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--6"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--7"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>So `FF282828` means fully opaque dark gray.

---

## 2. Solution Explorer and tool-window header background

### Problem

The title bar above panes such as Solution Explorer, Git Changes, and Class View had a white background. The pane name and pin, docking, and close buttons were washed out.

### Navigation

1. Open **Tools → Options**.
2. Select **Environment → Visual Experience**.
3. Open the **Theme Colors** or **Shell Colors** page.
4. Find:

```
EnvironmentHeaderInactive
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--9"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--10"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>### Value

```
FF282828
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--11"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--12"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>Despite the name, `EnvironmentHeaderInactive` controlled the visible title bar for the docked Solution Explorer pane.

---

## 3. Collapsed comment or code-region text and border

### Problem

A collapsed comment block or code region appeared as bright blue text inside a bright blue border. It stood out too strongly for content that had intentionally been collapsed.

### Navigation

1. Open **Tools → Options**.
2. Select **Environment → Fonts and Colors**.
3. Set **Show settings for** to:

```
Text Editor
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--14"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--15"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>4. Under **Display items**, find:

```
Collapsed Text (Collapsed)
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--16"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--17"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>5. Change **Item foreground**.

### Value

```
Red:   72
Green: 104
Blue:  76
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--18"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--19"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>Hex equivalent:

```
#48684C
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--20"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--21"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>This creates a subdued green-gray similar to normal comment text.

The foreground setting controls both:

- The collapsed placeholder text
- The thin border around the collapsed placeholder

The **Item background** option is disabled for this display item.

Visual Studio may need to be restarted before this setting fully takes effect.

---

## 4. Full-width background behind collapsed regions

### Problem

Every collapsed comment block or code region painted a gray strip across the full width of the editor.

### Navigation

1. Open **Tools → Options**.
2. Select **Environment → Fonts and Colors**.
3. Set **Show settings for** to:

```
Text Editor
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--23"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--24"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>4. Under **Display items**, find:

```
Collapsible Region
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--25"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--26"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>5. Change **Item background**.

### Value

```
Black
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--27"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--28"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>This matched the editor background and caused the full-width strip to disappear visually.

This is separate from `Collapsed Text (Collapsed)`:

- `Collapsed Text (Collapsed)` controls the placeholder text and its border.
- `Collapsible Region` controls the full-width background behind the collapsed line.

---

## 5. Current-line rectangular border

### Problem

The line containing the text cursor had a prominent gray rectangular border around the entire row. It was heavier and more noticeable than the equivalent indicator in Visual Studio 2022.

### Navigation

1. Open **Tools → Options**.
2. Select **Environment → Fonts and Colors**.
3. Set **Show settings for** to:

```
Text Editor
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--30"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--31"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>4. Under **Display items**, find:

```
Highlight Current Line
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--32"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--33"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>5. Change **Item foreground** to a subdued dark gray.
6. Leave **Item background** at its existing or automatic value unless a filled line background is desired.

### Suggested values

Moderately subdued:

```
Red:   38
Green: 38
Blue:  38
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--34"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--35"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>Hex:

```
#262626
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--36"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--37"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>More subtle:

```
Red:   28
Green: 28
Blue:  28
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--38"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--39"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>Hex:

```
#1C1C1C
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--40"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--41"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>Visual Studio allows the border color to be changed, but does not appear to expose a setting for the border thickness.

---

## Settings that were tested but did not control these elements

These were restored after testing:

```
EnvironmentBorderInactive
DividerStrokeDefault
EnvironmentHeader
SolidBackgroundFillTertiary
Collapsed Text Indicator (Collapsed)
```

<div class="relative w-full mt-4 mb-1" id="bkmrk--43"><div class=""><div class="contents"><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-(--code-block-surface) corner-superellipse/1.1 overflow-clip rounded-3xl [--code-block-surface:var(--bg-elevated-secondary)] dark:[--code-block-surface:var(--composer-surface-primary)] lxnfua_clipPathFallback"><div class="relative"><div class="pe-11 pt-3"><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼs ͼ16" dir="ltr" id="bkmrk--44"><div class="cm-scroller">  
</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div></div>Notes:

- `SolidBackgroundFillTertiary` controlled the main Solution Explorer tree-view background.
- `Collapsed Text Indicator (Collapsed)` controlled the background behind the expand/collapse chevron in the editor margin.
- Neither controlled the full-width collapsed-region strip.