WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > Styling and Theming > Creating a Custom Theme
Creating a Custom Theme

As well as built in themes provided by the ThemeManager, in SciChart you can also define your own custom theme.

Defining your own Theme ResourceDictionary

You will need to create a ResourceDictionary with the following brushes and colors.

NOTE: Ensure you have the x:Class= attribute. This is necessary to have a partial class in C# and allow you to create an instance of the ResourceDictionary.

 

Defining your own Theme ResourceDictionary
Copy Code 
<ResourceDictionary x:Class="WpfApplication1.MyCustomTheme"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <!--  *******************************************************  -->
    <!--  Colors and Brushes for SciChartv4Dark.xaml               -->
    <!--  *******************************************************  -->

    <!--  Chart Brushes  -->

    <SolidColorBrush x:Key="SciChartBackground" Color="#1c1c1e"/>
    <SolidColorBrush x:Key="GridBorderBrush" Color="#5a5b5b" />
    <Color x:Key="AxisBandsFill">#E1202123</Color>
    <SolidColorBrush x:Key="TickTextBrush" Color="#A6A7AC" />
    <SolidColorBrush x:Key="MajorGridLineBrush" Color="#323539" />
    <SolidColorBrush x:Key="MinorGridLineBrush" Color="#232426" />
    <SolidColorBrush x:Key="GridBackgroundBrush" Color="Transparent" />

    <!-- Modifier Brushes -->
    <SolidColorBrush x:Key="RolloverLineBrush" Color="#3342b649" />
    <SolidColorBrush x:Key="CursorLineBrush" Color="#9942b649" />
    <SolidColorBrush x:Key="RubberBandFill" Color="#3342b649" />
    <SolidColorBrush x:Key="RubberBandStrokeBrush" Color="#7742b649" />
   
    <!-- Legend Brushes -->
    <SolidColorBrush x:Key="LegendBackgroundBrush" Color="#1D2C35" />
    <SolidColorBrush x:Key="LabelBackgroundBrush" Color="#AA42b649" />
    <SolidColorBrush x:Key="LabelBorderBrush" Color="#FF42b649" />
    <SolidColorBrush x:Key="LabelForegroundBrush" Color="#EEEEEE" />

    <!-- Annotation Brushes -->
    <SolidColorBrush x:Key="TextAnnotationForeground" Color="#EEEEEE" />
    <SolidColorBrush x:Key="TextAnnotationBackground" Color="#AA42b649" />

    <!-- Scrollbar Brushes -->
    <Brush x:Key="OverviewFill">#BB262728</Brush>
    <Brush x:Key="ScrollbarBackgroundBrush">#262728</Brush>
    <Brush x:Key="ScrollbarBorderBrush">#121212</Brush>
    <Brush x:Key="ScrollbarGripsBackgroundBrush">#535353</Brush>
    <Brush x:Key="ScrollbarViewportBackgroundBrush">#222222</Brush>
    <Brush x:Key="ScrollbarViewportBorderBrush">#232323</Brush>
   
    <!--  Default Series Colors  -->
    <Color x:Key="UpWickColor">#FF52CC54</Color>
    <Color x:Key="DownWickColor">#FFE26565</Color>
    <SolidColorBrush x:Key="UpBodyBrush" Color="#A052CC54" />
    <SolidColorBrush x:Key="DownBodyBrush" Color="#D0E26565" />
    <Color x:Key="UpBandSeriesLineColor">#FF52CC54</Color>
    <Color x:Key="DownBandSeriesLineColor">#FFE26565</Color>
    <Color x:Key="UpBandSeriesFillColor">#9052CC54</Color>
    <Color x:Key="DownBandSeriesFillColor">#A0E26565</Color>
    <SolidColorBrush x:Key="MountainAreaBrush">#774083B7</SolidColorBrush>
    <Color x:Key="MountainLineColor">#FFC6E6FF</Color>
    <Color x:Key="LineSeriesColor">#FFC6E6FF</Color>
    <Color x:Key="ColumnLineColor">#FFFFFFFF</Color>
    <SolidColorBrush x:Key="ColumnFillBrush" Color="#FFFFFFFF"></SolidColorBrush>
    <LinearGradientBrush x:Key="DefaultColorMapBrush">
        <GradientStop Offset="0" Color="DarkBlue" />
        <GradientStop Offset="0.5" Color="CornflowerBlue" />
        <GradientStop Offset="1" Color="#FF22AA" />
    </LinearGradientBrush>

</ResourceDictionary>

Next, create a partial class and inherit from ResourceDictionary.

NOTE: The namespace and class name must match the x:Class attribute in the XAML Resource Dictionary

Defining your own Theme ResourceDictionary
Copy Code 
namespace WpfApplication1
{
   public partial class MyCustomTheme : ResourceDictionary
   {
       public MyCustomTheme()
       {
           InitializeComponent();
       }
   }
}

Registering and Using your Custom Theme

After defining your ResourceDictionary and all of the keys mentioned above, you need to create a custom theme class and add it to ThemeManager:

Registering and Using your Custom Theme
Copy Code 
// Register with ThemeManager before using
var customTheme = new MyCustomTheme();
ThemeManager.AddTheme("MyCustomTheme", customTheme);

Applying the Custom Theme in XAML

You can now apply the theme as you would any other theme.

Applying the Custom Theme
Copy Code 
<!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartSurface s:ThemeManager.Theme="MyCustomTheme">

   <!-- XAxis, YAxis, RenderableSeries omitted for brevity -->
  
</s:SciChartSurface>

Applying the Custom Theme in CODE

Applying the Custom Theme
Copy Code 
var sciChartSurface = new SciChartSurface();
ThemeManager.SetTheme(sciChartSurface, "MyCustomTheme");