Themes

A theme defines the base look of a chart. Themes set the value of the properties that were not explicitly defined at each instance. This means a property will not use the value defined in a theme when that property was explicitly set.

When the theme is not explicitly defined, LiveCharts adds the default theme. This theme, by default, detects if the system or the app uses dark mode. If so, charts will adapt to the user or app preferences:

:::tip System preference detection is only supported on Avalonia, Uno, Maui and WinUI, because these frameworks provide methods to detect the system and app preferences. Also, default themes on these frameworks respond to the system and app preferences, so by default LiveCharts also adds this behavior. :::

Force default theme to light or dark mode

When the app prefers a theme mode, then LiveCharts will also follow that rule, so the recommended way is to force the style to light or dark mode at your application level. This makes charts consistent with all the UI in the app. This varies between each framework. As an example, in the case of WinUI, you can set RequestedTheme = ApplicationTheme.Dark; to force your application to be in dark mode always, no matter the system preference. This will also turn charts into dark mode.

But in case your framework does not provide control over the theme variant, you can manually force it to light or dark mode:

LiveCharts.Configure(config => 
{
    config.AddDefaultTheme(requestedTheme: LvcThemeKind.Dark)
});

Customize a theme

We can use the default theme in the library as a base, then just modify the properties we need to make the app look as we need. In the next example, we define the LiveChartsThemeExtensions class, and inside it the AddMyCustomTheme extension method to define the default look of the charts in our application:

{{~ render $"~/../samples/ViewModelsSamples/LiveChartsThemeExtensions.cs" ~}}

Finally we need to set up this theme when the application starts:

LiveCharts.Configure(config => config.AddMyCustomTheme());

Create your own theme

You can create and register a theme globally, this means that a chart will use it as a fallback theme when the chart ChartTheme property is null.

LiveCharts.Configure(config =>
{
    config.HasTheme(theme =>
    {
        // configure the theme here... // mark
        // for more information about the theme configuration, please see the // mark
        // source code of the default theme: // mark
        // https://github.com/beto-rodriguez/LiveCharts2/blob/master/src/skiasharp/LiveChartsCore.SkiaSharp/ThemesExtensions.cs
    });
});