Theming Overview

Telerik UI for .NET MAUI comes with a built-in theme that controls the visual appearance of the components, including colors, borders, backgrounds, size, layout, position, and font size. The theme also offers multiple color variations to choose from.

In addition to the Telerik theme, Telerik UI for .NET MAUI also provides a Platform theme with light and dark variants. The platform theme closely resembles the light and dark modes of the device that runs your MAUI application.

The built-in Telerik UI for .NET MAUI theme and its swatches were introduced in version 8.0.0 (2024 Q4) and are currently in preview.

Theme

A theme is a collection of styles and templates in XAML files, which determine the appearance of the Telerik .NET MAUI components, including fonts, colors, sizes, and layouts. Furthermore, you can apply the theme's styles to other parts of your app and achieve visual consistency.

Swatch

A theme swatch is a color variation of a theme. All swatches of a given theme use the same fonts, sizes, and layouts. On the other hand, the text colors, background colors, and border colors are different.

The Telerik .NET MAUI theme comes with a set of eight predefined swatches for both dark and light modes while the Platform theme offers a light and dark swatch.

Theme	Swatch	Color
Platform	Light
Platform	Dark
Telerik	Main
Telerik	Main Dark
Telerik	Ocean Blue
Telerik	Ocean Blue Dark
Telerik	Purple
Telerik	Purple Dark
Telerik	Turquoise
Telerik	Turquoise Dark

The next image shows the differences and similarities between the Purple and Purple Dark swatches when applied to the AutoComplete control.

You can explore and compare the built-in theme swatches in the Telerik .NET MAUI ControlsSamples App. Go to the Theming example of each component and use the Change Theme button to switch between the theme swatches.

Using the MAUI Theming

Before you can add Telerik Theming to your app, make sure that it is configured to use the Telerik UI for .NET MAUI components. For more details, see the Getting Started with Telerik UI for .NET MAUI in Visual Studio or Visual Studio Code articles.

1. Go to the .csproj file of your MAUI project and set UseTelerikTheming property to true in a separate PropertyGroup:

<PropertyGroup>
    <UseTelerikTheming>true</UseTelerikTheming>
</PropertyGroup>

2. Rebuild the solution—this will generate a new TelerikTheming folder containing all styles and resources needed for the Telerik .NET MAUI controls.

• The Colors folder contains the Platform and Telerik subfolders, each holding the resource dictionaries required for the theme swatches. Note that the colors are referenced through dynamic resources, so you can update them at runtime.

  

• The Styles folder contains the Platform and Telerik subfolders, each holding the styles and templates of the Telerik UI for .NET MAUI controls for the corresponding theme.

  • The styles are implemented through control-specific XAML files (see the next image).
  • The styles for all base controls that are used to build complex controls like the DataGrid are in the Core.xaml file.
  • The control templates in the XAML files are specific to the Telerik theme and the Platform theme. They differ from the default control templates of the Telerik UI for .NET MAUI controls.
  • The number of files in the Platform and Telerik subfolders is different because both themes support a different number of controls.

  

The files in the TelerikTheming folder are auto-generated. Use them only as a reference and do not modify them. See Customizing the Telerik Theme for information on how to use these files to apply your own styles.

3. Go to the App.xaml file of your app and add the TelerikTheming resource dictionary to the application resources:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
            <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            <local:TelerikTheming />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

4. Set the Telerik theme and the desired swatch in the App.xaml.cs file. This example uses the Purple swatch:

var telerikTheming = Application.Current
                    .Resources
                    .MergedDictionaries
                    .OfType<TelerikTheming>()
                    .Single();
telerikTheming.Theme = TelerikTheming.Themes
                    .Single(t => t.Theme == "Telerik" && t.Swatch == "Purple");

The steps above apply the Telerik theme with its Purple swatch to the Telerik .NET MAUI components used across the app.

For example, if you have the following RadToggleButton control:

<telerik:RadToggleButton x:Name="toggleButton"
                         Content="Wi-Fi" />

After applying the Purple swatch, the ToggleButton looks like this:

Some of the Telerik UI for .NET MAUI controls do not fully support the Telerik theming yet. These are AIPrompt, Chart, DataPager, ImageEditor, SlideView, and Toolbar.

Applying Theme Colors throughout the App

You can use the colors provided by the Telerik theming mechanism and apply them everywhere in your application. Each theme swatch provides a set of colors that you can use in parts of your app that aren't Telerik components. This allows you to achieve a consistent look and feel.

For example, you can use the RadAppSurfaceColor and RadOnAppSurfaceColor colors for background/text color respectively, and RadPrimaryColor for the accent color to match the appearance of the Telerik controls:

<VerticalStackLayout Spacing="10" 
                     Padding="20"
                     BackgroundColor="{DynamicResource RadAppSurfaceColor}">
    <Label Text="Telerik .NET MAUI Theming" 
           FontSize="20"
           TextColor="{DynamicResource RadOnAppSurfaceColor}" />
    <BoxView Color="{DynamicResource RadPrimaryColor}"
            HeightRequest="4" />
    <Label Text="Telerik UI for .NET MAUI comes with a built-in theme that controls the visual appearance of the components." 
           FontSize="14"
           TextColor="{DynamicResource RadOnAppSurfaceColor}" />
    <telerik:RadToggleButton Content="Telerik Theming" 
                             HorizontalOptions="Start" />
</VerticalStackLayout>

Here is the result with the Purple and Purple Dark swatches applied:

Changing the Theme Swatch Dynamically

You can take advantage of the available theme swatches and change them at runtime based on the device theme. This allows the application to respond to changes in the device theme from light to dark and the other way around. For more details on the suggested implementation, see the Changing the Theme at Runtime KB article.

Next Steps

• Customizing the Telerik Theme Colors
• Customizing the Control-Specific Theme Resources