VisualStudio2013 Theme

Inspired by the Visual Studio design, the VisualStudio2013 theme comes with three built-in color variations – Light, Dark and Blue.

Jump to the following topics to learn about the specifics of the theme's palette and features.

Default Theme Colors

Below you can find the differences between the three color variations. Each brush has relevant HEX value in the corresponding color variation.

Color name Light (default) Dark Blue
Colors, which are same in the three palettes
AccentMainColor FF3399FF
FF3399FF
FF3399FF
AccentDarkColor FF007ACC
FF007ACC
FF007ACC
SelectedColor FFFFFFFF
FFFFFFFF
FFFFFFFF
ValidationColor FFF3333
FFFF3333
FFFF3333
Color, which are different in the three palettes
AccentColor FF007ACC
FF007ACC
FFE5C365
MarkerColor FF1E1E1E
FFF1F1F1
FF1E1E1E
StrongColor FF717171
FF999999
FF717171
MainColor FFFFFFFF
FF1E1E1E
FFFFFFFF
PrimaryColor FFEEEEF2
FF2D2D30
FFE6EBF5
AlternativeColor FFF5F5F5
FF252526
FFF6F6F6
MouseOverColor FFC9DEF5
FF3E3E40
FFFDF4BF
BasicColor FFCCCEDB
FF3F3F46
FFCCCEDB
SemiBasicColor 66CCCEDB
663F3F46
66CCCEDB
HeaderColor FF007ACC
FF007ACC
FF35496A
ComplementaryColor FFDBDDE6
FF434346
FFDBDDE6
ReadOnlyBackgroundColor FFF5F5F5
FF252526
FFF6F6F6
ReadOnlyBorderColor FFCCCEDB
FF3F3F46
FFCCCEDB
Additional color
DefaultForegroundColor FF1E1E1E
FFF1F1F1
FF1E1E1E

Default Theme Brushes

Here you can find more details about each brush and where it is usually applied.

Common Brushes (same for all variations)

  • AccentMainBrush—Blue by default and it is the main accent brush for the theme
  • AccentDarkBrush—Blue by default and it is the darker accent brush for the theme
  • SelectedBrush—White by default and is the main color for text or paths which are over elements with accent background
  • ValidatonBrush—Red by default and it is the brush used for validation where such is applicable in our controls

Foreground Brushes

  • MarkerBrush—the main brush used for text color, also path's fill in MouseOver state
  • StrongBrush—paths' and ticks' fill in Normal state, also ReadOnly text

Background and Border Brushes

  • AccentBrush—another accent brush, usually used for the border of elements in their MouseOver, Active, Toggled or Focused state.
  • MainBrush—used for background of controls with direct input such as TextBox, MaskedInput, Editable ComboBox, AutoCompleteBox, PasswordBox. Also used as main background of elements that has different content with unpredictable background (PrimaryBrush or AlternativeBrush).
  • PrimaryBrush—used for background of most of the controls that have no direct input in their normal state.
  • AlternativeBrush—used as alternative background of PrimaryBrush. Also used as background of Popups and DropDowns.
  • MouseOverBrush—used for background of elements that are in MouseOver state.
  • BasicBrush—widely used for border color of controls in their Normal state.
  • SemiBasicBrush—the same brush as BasicBrush with 40% opacity, used for background of elements that are in MouseOver state.

Special State/Elements Brushes

  • HeaderBrush—used for the background of headers in controls such as Window, RibbonView, ScheduleView, Docking Pane, Docking ToolWindow, TileView.
  • ComplementaryBrush—used for elements in Disabled state.

The only resource that is of type Color and does not have a respective SolidColorBrush is the * DefaultForegroundColor. It is currently used only in the ExpressionEditor.

The following screenshot shows the usage of some of the brushes:

Common Styling Appearance VS 2013 Theme 01

Changing Palette Colors

The VisualStudio2013 theme provides dynamic change of the palette colors responsible for the brushes used in our controls. Their defaults are stated above. This mechanism is used to modify the color variation of the theme.

The general naming convention is: VisualStudio2013Palette.Palette.[name]Color is responsible for [name]Brush – e.g. VisualStudio2013Palette.Palette.AccentColor sets the color for telerik:VisualStudio2013Resource ResourceKey=AccentBrush

Changing the colors can be achieved in code behind.

Setting palette colors

VisualStudio2013Palette.Palette.AccentColor = Color.FromRgb(255, 0, 0); 

Changing Theme Variation

There are three palettes of colors which can be easily set by choosing one of the three default color variations:

The next screenshot displays RadCalendar in the three color variations:

Common Styling Appearance VS 2013 Theme 02

You can switch the three color palettes by calling the LoadPreset method as shown below:

//default color variation 
VisualStudio2013Palette.LoadPreset(VisualStudio2013Palette.ColorVariation.Light); 
 
//blue color variation 
VisualStudio2013Palette.LoadPreset(VisualStudio2013Palette.ColorVariation.Blue); 
 
//dark color variation 
VisualStudio2013Palette.LoadPreset(VisualStudio2013Palette.ColorVariation.Dark);  

The Dark variation of the theme is designed with a dark background in mind. It is recommended to use such a background in your application when choosing it.

Changing Font Properties

The FontSize and FontFamily properties of all components in the application can be dynamically changed for the VisualStudio2013 theme the same way as in all other Available Themes which support ThemePalette.

These properties are public so you can easily modify the theme resources at one single point. The most commonly used FontSize in the theme is named FontSize and its default value is 12. The bigger font sizes are used for headers and footers while smaller ones are used inside complex controls such as RadRibbonView, RadGauge, RadGanttView, etc. As for the FontFamily - there is only one FontFamily resource which is named FontFamily and it is set to Segoe UI.

Please note that for complex scenarios we strongly recommend setting font size only initially before the application is initialized. We recommend font sizes between 11px and 19px for the FontSize property.

All the available FontSizes and FontFamily as well as their default values:

VisualStudio2013Palette.Palette.FontSizeXXS = 9;  
VisualStudio2013Palette.Palette.FontSizeXS = 10; 
VisualStudio2013Palette.Palette.FontSizeS = 11;  
VisualStudio2013Palette.Palette.FontSize = 12; 
VisualStudio2013Palette.Palette.FontSizeL = 13; 
VisualStudio2013Palette.Palette.FontSizeXL = 20; 
VisualStudio2013Palette.Palette.FontSizeXXL = 22; 
VisualStudio2013Palette.Palette.FontFamily = new FontFamily("Segoe UI"); 
More details regarding the usage of the rarely used font sizes inside the different controls can be found below:
  • VisualStudio2013Palette.Palette.FontSizeXXS is used only in:

    • HorizontalBulletGraphStyle and VerticalBullerGraphStyle in Telerik.Windows.Controls.DataVisualization
  • VisualStudio2013Palette.Palette.FontSizeXS is used in:

    • TimeBar's SelectionRangeStyle in Telerik.Windows.Controls.DataVisualization
    • ExpressionEditor in Telerik.Windows.Controls.Expressions
    • GridViewGroupPanel in Telerik.Windows.Controls.GridView
  • VisualStudio2013Palette.Palette.FontSizeS is used in:

    • TimeBar's ItemControlStyle in Telerik.Windows.Controls.DataVisualization
    • GanttView's EventContainerStyle in Telerik.Windows.Controls.GanntView
    • ScheduleView TimeRulerItems' styles in Telerik.Windows.Controls.ScheduleView
  • VisualStudio2013Palette.Palette.FontSizeL is used in:

    • TimeBar's GroupControlStyle in Telerik.Windows.Controls.DataVisualization
    • Docking's Headers in Telerik.Windows.Controls.Docking
    • ScheduleView TimeRulerGroupItems' styles in Telerik.Windows.Controls.ScheduleView
  • VisualStudio2013Palette.Palette.FontSizeXXL is used in:

    • ScheduleView warnings

As the following example shows, you can change the default FontFamily from "Segoe UI" to "Calibri" and the FontSize from 12 to 16 on a click of a button:

<StackPanel> 
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> 
        <telerik:RadCalendar x:Name="Calendar" Width="250" Height="250" Margin="4 10"/> 
        <telerik:RadClock x:Name="Clock" Height="250" Margin="4 10" TimeInterval="0:0:1"/> 
    </StackPanel> 
    <telerik:RadButton x:Name="BtnChangeFontSize" VerticalAlignment="Center"  
                       HorizontalAlignment="Center" Content="Change Font" 
                       Click="OnButtonChangeFontSizeClick" /> 
</StackPanel> 

private void OnButtonChangeFontSizeClick(object sender, RoutedEventArgs e) 
{ 
   VisualStudio2013Palette.Palette.FontSize = 16; 
   VisualStudio2013Palette.Palette.FontFamily = new FontFamily("Calibri"); 
} 
This will be the final result:

Common Styling Appearance VS 2013 Theme

Changing Opacity

Since the R2 2019 version, you can easily change the opacity of the disabled and read-only elements by using the DisabledOpacity and ReadOnlyOpacity properties of the VisualStudio2013Palette. The default values are 0.2 and 0.4 respectively. Also, to control the background and border color in the read-only state, you can use the following brushes:

  • ReadOnlyBackgroundBrush—Used as a background of elements that are in a read-only state.
  • ReadOnlyBorderBrush—Used in borders inside elements that are in a read-only state.

Changing the read-only and disabled opacity

VisualStudio2013Palette.Palette.ReadOnlyOpacity = 0.5; 
VisualStudio2013Palette.Palette.DisabledOpacity = 0.5; 

Merging Modified Palette Resources With StyleManager Theming Approach

When modifying fonts, colors, or other resources from the VisualStudio2013Palette and StyleManager is used as theming mechanism, the theme's ResourceDictionary needs to be merged in App.xaml file to apply the changes.

Merging the theme's ResourceDictionary in App.xaml

<Application.Resources>  
    <ResourceDictionary>  
        <ResourceDictionary.MergedDictionaries>  
            <telerik:VisualStudio2013ResourceDictionary/>  
        </ResourceDictionary.MergedDictionaries>  
    </ResourceDictionary>  
</Application.Resources> 

See Also

In this article