Modern UI: Editor tab description and icon colors do not match the filename color

[na2co3-ftw]

Type: Bug

Description

In Modern UI, editor tab descriptions (the containing folder names) and editor tab icons without a specific color, such as the Settings icon, respect the theme’s tab.*Foreground colors. In contrast, editor tab filenames use modernEditorTab.*Foreground colors or a translucent foreground color for inactive tabs.

This results in inconsistent foreground colors within the same editor tab.

It also makes it difficult to adjust tab contrast because most tab.*Background colors are ignored while some tab.*Foreground colors are still applied. As a result, the intended background/foreground color pairs cannot be configured reliably.
For example, in the Light 2026 theme, the description of an inactive editor tab appears more prominent than its filename.

VS Code version: Code - Insiders 1.135.0-insider (a1c7d1b, 2026-08-19T02:46:58Z)
OS version: Windows_NT x64 10.0.26200
Modes:

System Info

Item	Value
CPUs	12th Gen Intel(R) Core(TM) i9-12900 (24 x 2419)
GPU Status	2d_canvas: enabled GPU0: VENDOR= 0x10de, DEVICE=0x2504 [NVIDIA GeForce RTX 3060], DRIVER_VENDOR=NVIDIA, DRIVER_VERSION=32.0.15.9186 ACTIVE GPU1: VENDOR= 0x1414, DEVICE=0x008c [Microsoft Basic Render Driver], DRIVER_VERSION=10.0.26100.8972 Machine model name: Machine model version: direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: disabled_off trees_in_viz: disabled_off video_decode: enabled video_encode: enabled webgl: enabled webgpu: enabled webnn: disabled_off
Load (avg)	undefined
Memory (System)	63.75GB (49.92GB free)
Process Argv	--crash-reporter-id e97790c8-c974-448f-8594-f9c890b4659d
Screen Reader	no
VM	0%

Extensions: none

A/B Experiments

vsliv368cf:30146710
pythonvspyt551cf:31249598
nativeloc1:31118317
dwcopilot:31158714
dwoutputs:31242946
copilot_t_ci:31333650
g012b348:31231168
pythonrdcb7:31268811
pythonpcpt1:31399616
6518g693:31302842
envsactivate1:31349248
editstats-enabled:31346256
cloudbuttont:31366566
3efgi100_wstrepl:31403338
ddidtcf:31398485
cp_cls_t_966_ss:31526232
4je02754:31455664
c3h7c220:31478652
cp_cls_c_1081:31454833
conptydll_true:31485575
e9c30283:31453065
test_treatment2:31471001
46204921:31447328
ei9d7968:31462942
hhf17803:31462392
h08i8180:31475367
ec1eg703:31520046
ddid_c:31478205
hmra_i5g22:31518061
bjc72774_agent_sandbox:31538428
7df3h592:31491241
cp_cls_t_1082:31535311
logging_enabled_new:31490725
jb_cp_cls_t_632:31543129
32d76977:31503652
ha629193:31508444
a1ije391_t:31533808
jbcp_cls_pctr_t:31531130
cp_intellij_t_nes:31548657
jf4hg949:31526829
hide-eh-duplicates:31543293
replace-eh-with-ah:31545853
hjji5903:31534458
f412h606:31543414
enable_editor_pane_layout:31551200
52258b4d:31547953
36h42362:31560305
c7c27ce7:31551212
6577i413_copy:31558653
1h923230:31564177
1532g621_copy:31554310
treatment-23-1:31555779
unuse_dynamic_mcp:31555281
0c1h4866:31562347
vrbsty_fls:31561057
18bic794_t_pref:31561846
be7id924_c:31561848
5b8j3302:31564600
mangle-name-treatment:31568054
signed-out-control:31566874
codex-agent-enabled:31566739
a9h1h725:31568527

Reproduction

1. Enable Modern UI.
2. Apply a theme with the following colors. Configure these colors in the theme rather than through workbench.colorCustomizations to avoid additional customization by modernTabColorCustomizations.ts.

{
    "name": "Test Light Theme",
    "colors": {
        "modernEditorTab.activeForeground": "#000",
        "modernEditorTab.hoverForeground": "#000",
        "tab.activeForeground": "#f00",
        "tab.unfocusedActiveForeground": "#800",
        "tab.inactiveForeground": "#0f0",
        "tab.unfocusedInactiveForeground": "#080",
        "tab.hoverForeground": "#00f",
        "tab.unfocusedHoverForeground": "#008"
    }
}

3. Open multiple files with the same filename so that the containing folder name is displayed as the tab description.
4. Open Settings, then select Open Modal Window in Main Window.
5. Check the editor tabs in both focused and unfocused editor groups.

Actual Behavior

The containing folder names and the Settings icon use colors from tab.*Foreground instead of the modernEditorTab.*Foreground colors. For example, they appear red, green, or blue, while the filenames appear black.

• In a focused editor group:
  
  
  
• In an unfocused editor group:
  
  
  

Notes

• The selected editor tab consistently uses tab.selectedForeground and tab.selectedBackground. I assume this is intentional.
• Editor tab action buttons currently use tab.inactiveForeground, but they will become invisible when Update tab actions visibility for active tabs in Modern UI #331629 is merged.
• The editor tab drop border also uses tab.activeForeground. Is this intentional?