UseVsTheme applies incorrect style for TabControl.TabItem in the dark mode

[dbalikhin]

TabItems (TabControl) do not follow standard VS colours for tabs, see screenshot (top row). An active tab is hardly readable in the dark mode.

[reduckted]

Visual Studio's brushes defined in EnvironmentColors don't seem to be correct (or maybe I'm using the wrong brushes). I've defined this:

<Style TargetType="TabItem">
    <Setter Property="BorderBrush" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabBorderBrushKey}}" />
    <Setter Property="Background" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabGradientBrushKey}}" />
    <Setter Property="Foreground" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabTextBrushKey}}" />

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabMouseOverBorderBrushKey}}" />
            <Setter Property="Background" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabMouseOverBackgroundGradientBrushKey}}" />
            <Setter Property="Foreground" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabMouseOverTextBrushKey}}" />
        </Trigger>

        <Trigger Property="IsSelected" Value="True">
            <Setter Property="BorderBrush" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabSelectedBorderBrushKey}}" />
            <Setter Property="Background" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabSelectedTabBrushKey}}" />
            <Setter Property="Foreground" Value="{DynamicResource {x:Static platform:EnvironmentColors.ToolWindowTabSelectedTextBrushKey}}" />
        </Trigger>
    </Style.Triggers>
</Style>

This is what it looks like in the Blue theme:

Not bad, but not great either. There doesn't seem to be any colors specifically for disabled tabs. However, the dark theme is just awful:

It looks similar to what you posted, so perhaps you've defined simiar styles.

I don't know whether a different tab layout would be suitable for you, but you could try using these styles that Visual Studio provides:

<ResourceDictionary>
    <Style TargetType="TabControl" BasedOn="{StaticResource {x:Static shell:VsResourceKeys.ThemedDialogTabControlNavigationStyleKey}}"/>
    <Style TargetType="TabItem" BasedOn="{StaticResource {x:Static shell:VsResourceKeys.ThemedDialogTabItemNavigationStyleKey}}"/>
</ResourceDictionary>

The shell namespace is xmlns:shell="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0".

It gives you a vertical tab strip on the left-hand side and looks like this:

I'm not sure where that style is actually used in Visual Studio, but it looks similar to what you see when you open Build -> Publish Selection.

[yannduran]

In Start Page+ I based my styles on VsColors from Microsoft.VisualStudio.Shell like so:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vsshell="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.15.0"
    >
    <!-- Menu -->

    <SolidColorBrush x:Key="MenuActiveBrush"
        Color="{DynamicResource {x:Static vsshell:VsColors.ToolWindowTabSelectedTextKey}}"
        />

    <SolidColorBrush x:Key="MenuInactiveBrush"
        Color="{DynamicResource {x:Static vsshell:VsColors.ToolWindowTabSelectedTextKey}}"
        />

    <SolidColorBrush x:Key="MenuBackgroundBrush"
        Color="{DynamicResource {x:Static vsshell:VsColors.ToolWindowBackgroundKey}}"
        />

etc

[LesterSmith]

I have added a Menu and Tab Control to my tool window and I am using madskristensen's VsTheme.cs file. Since the menu and tab control did not theme properly, I added two new styles as follows but that didn't affect the styling at all.

            allResources[typeof(Menu)] = new Style
            {
                TargetType = typeof(Menu),
                BasedOn = (Style)shellResources[typeof(MenuItem)],
                Setters =
                {
                    new Setter(Control.PaddingProperty, new Thickness(2, 3, 2, 3))
                }
            };

            allResources[typeof(TabControl)] = new Style
            {
                TargetType = typeof(TabControl),
                BasedOn = (Style)shellResources[typeof(TabItem)],
                Setters =
                {
                    new Setter(Control.PaddingProperty, new Thickness(2,3,2,3))
                }
            };

Since menu and tabcontrol are both containers of sorts it appears that I may need to define a new theme resource but I can't figure how to do that.