Tabs Studio Blog (organizing Visual Studio document tabs)

December 16, 2011

Dark theme for Visual Studio 2010

Filed under: Uncategorized — Tags: , — Sergey Vlasov @ 12:32 pm

If you like the original Visual Studio 2010 tabs theme you can use the excellent Visual Studio 2010 style for Tabs Studio by Jameel Al-Aziz. But, as this style changes many aspects of tabs presentation, it also overrides custom colors that you assign with tab coloring rules in Tabs Studio presentation options. (Of course, you can implement all coloring rules as style rules, it just requires working directly with XAML). Below is a simple style that closer to the overall Visual Studio 2010 theme and still supports additional tab coloring rules.

The following style changes tab text color from default black to white for not selected and not highlighted tabs:

<Style TargetType="TabsStudio:TabName" BasedOn="{StaticResource DefaultTabNameStyle}">
  <Style.Triggers>
  <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
                <Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Foreground" Value="White"/>
      </MultiDataTrigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:TabExtension" BasedOn="{StaticResource DefaultTabExtensionStyle}">
  <Style.Triggers>
  <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
                <Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Foreground" Value="White"/>
      </MultiDataTrigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:TabNameModificationMarker" BasedOn="{StaticResource DefaultTabNameModificationMarkerStyle}">
  <Style.Triggers>
  <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
                <Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Foreground" Value="White"/>
      </MultiDataTrigger>
  </Style.Triggers>
</Style>

<Style TargetType="TabsStudio:TabExtensionModificationMarker" BasedOn="{StaticResource DefaultTabExtensionModificationMarkerStyle}">
  <Style.Triggers>
  <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
                <Condition Binding="{Binding Path=IsTabSelected, RelativeSource={RelativeSource AncestorType=TabsStudio:Tab}}" Value="False"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Foreground" Value="White"/>
      </MultiDataTrigger>
  </Style.Triggers>
</Style>

Plus you need to create a tab coloring rule for not selected tabs with transparent background:

<SolidColorBrush Color="Transparent"/>

Transparent background for not selected tabs

Transparent background for not selected tabs


It is very important that this rule be the first one in your tab coloring rules so that additional tab coloring rules could override it with custom colors. Below is the new tabs look:
Dark tabs theme in Visual Studio 2010

Dark tabs theme in Visual Studio 2010


Now you can for example set a specific color for a project with Tab coloring rules. As tab text is white, you need to use dark colors for background or use normal colors with transparency (to set transparency level, use the Opacity slider in the Color Picker dialog):
Project tab coloring rule with transparency

Project tab coloring rule with transparency


Dark theme with custom transparent colors for two projects

Dark theme with custom transparent colors for two projects


Additionally you can set selected but unfocused tab background to gray as in the original Visual Studio 2010 theme:

<Condition Binding="{Binding Path=IsGroupFocused, RelativeSource={RelativeSource Self}}" Value="False"/>
<Condition Binding="{Binding Path=IsGroupWithLastActiveDocument, RelativeSource={RelativeSource Self}}" Value="True"/>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
  <GradientStop Color="#FFFDFDFD" Offset="0"/>
  <GradientStop Color="#FFD5DAE3" Offset="0.49"/>
  <GradientStop Color="#FFCED4DF" Offset="0.5"/>
  <GradientStop Color="#FFCED4DF" Offset="1"/>
</LinearGradientBrush>

Gray color rule for selected but unfocused tab

Gray color rule for selected but unfocused tab


Gray selected tab when Solution Explorer is active

Gray selected tab when Solution Explorer is active

Update: Added white color to modification markers in the style.

4 Comments

  1. It would be nice if we could change the order of the Rule in the UI using drag and drop or up/down buttons.

    Thanks

    Comment by Jonathan Schmidt — December 17, 2011 @ 9:51 pm


RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Blog at WordPress.com.

%d bloggers like this: