Color Themes for DevExpress .NET MAUI Controls

• Feb 23, 2026
• 5 minutes to read

DevExpress .NET MAUI Controls ship with 10 built-in color themes available in dark and light variants. These themes are based on Material Design 3 guidelines. You can apply one of those predefined themes or use our Theme class to create a custom color theme.

• Apply a Predefined Color Theme
• Create a Theme Based on a Custom Seed Color
• Match Android Color Settings
• Color Theme Anatomy
• Apply Theme Colors to a Standard Control
• Create and Preview a Custom Theme

Color Themes for .NET MAUI use the Material Design Dynamic Colors system. This system is built on semantic variables, and each of them has a role. Refer to the following topic for more information on color roles: Material Design Color Roles.

Apply Color Themes

Apply a Predefined Color Theme

Follow the steps below to apply a predefined color theme to DevExpress .NET MAUI Controls:

1. Set the UseAndroidSystemColor property to false.
2. Create a Theme instance with the specified predefined seed color to generate a color theme. Refer to the ThemeSeedColor enumeration to get the list of available predefined seed colors.
3. Pass the created theme to the ThemeManager.Theme property.

The following code sample applies the predefined Brown color theme:

• C#

using DevExpress.Maui;
using DevExpress.Maui.Core;

// ...
public static class MauiProgram {
    public static MauiApp CreateMauiApp() {
        ThemeManager.UseAndroidSystemColor = false;
        ThemeManager.Theme = new Theme(ThemeSeedColor.Brown);
        var builder = MauiApp.CreateBuilder();
        builder
            .UseDevExpress()
            // ...
            .UseMauiApp<App>();
        return builder.Build();
    }
}

Create a Theme Based on a Custom Seed Color

Follow the steps below to create a custom color theme and apply it to DevExpress .NET MAUI Controls:

1. Set the UseAndroidSystemColor property to false.
2. Use the Theme.ctor(Microsoft.Maui.Graphics.Color) constructor to create a new color theme based on a custom seed color.
3. Pass the created theme to the ThemeManager.Theme property.

• C#

using DevExpress.Maui;
using DevExpress.Maui.Core;
using Microsoft.Maui.Graphics;

// ...
public static class MauiProgram {
    public static MauiApp CreateMauiApp() {
        ThemeManager.UseAndroidSystemColor = false;
        ThemeManager.Theme = new Theme(Color.FromArgb("FF6200EE"));
        var builder = MauiApp.CreateBuilder();
        builder
            .UseDevExpress()
            // ...
            .UseMauiApp<App>();
        return builder.Build();
    }
}

Match Android Color Settings

Set the UseAndroidSystemColor property to true to apply the specified Android system theme color to DevExpress .NET MAUI Controls:

• C#

using DevExpress.Maui;
using DevExpress.Maui.Core;

// ...
public static class MauiProgram {
    public static MauiApp CreateMauiApp() {
        ThemeManager.UseAndroidSystemColor = true;
        var builder = MauiApp.CreateBuilder();
        builder
            .UseDevExpress()
            // ...
            .UseMauiApp<App>();
        return builder.Build();
    }
}

When the UseAndroidSystemColor property is enabled, an exception occurs if you apply a color theme.

Limitation

The UseAndroidSystemColor property is in effect on Android version 12 (API levels 31,32) and newer.

Color Theme Anatomy

Color themes for DevExpress .NET MAUI Control are generated based on a seed color. A set of generated colors is a tonal palette. The tonal palette includes shades of colors used in light and dark color themes. A set of tonal palette colors used in a light or dark theme is a color scheme. Each color in a color scheme has a name ( theme key ) and value. Appearance properties of controls are bound to color names (theme keys).

The following image illustrates the anatomy of a Theme generated based on the color TealGreen:

Images above illustrate three stages of theme generation:

1. A seed color (a ThemeSeedColor value).
2. A set of generated colors (a TonalPalette instance) for each core color (primary, secondary, tertiary, neutral, neutralvariant, and error).
3. Color scheme (a ThemeColorScheme instance) for both light and dark device themes. Each color has a theme color key and a ThemeColor value.

Apply Color Theme Colors to a Standard Control

You can use the following XAML markup extensions to obtain theme colors and apply them to a custom element:

ThemeColorExtensionImplements a XAML markup extension that gets color theme colors by theme color key.ThemePrimaryColorExtensionImplements a XAML markup extension that allows you to get the color theme’s primary color.ThemeSecondaryColorExtensionImplements a XAML markup extension that allows you to get the color theme’s secondary color.ThemeTertiaryColorExtensionImplements a XAML markup extension that allows you to get the color theme’s tertiary color.ThemeNeutralColorExtensionImplements a XAML markup extension that allows you to get the color theme’s neutral color.ThemeNeutralVariantColorExtensionImplements a XAML markup extension that allows you to get the color theme’s neutral variant color.ThemeErrorColorExtensionImplements a XAML markup extension that allows you to get the color theme’s error color.

The following code snippet obtains colors from the predefined TealGreen color theme:

• XAML

<ContentPage ...
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             Shell.BackgroundColor="{dx:ThemeColor Surface}"
             Shell.TitleColor="{dx:ThemeNeutralColor Light=99, Dark=10}"
             BackgroundColor="{dx:ThemeColor SurfaceContainerLow}">
    <ContentPage.Behaviors>
        <toolkit:StatusBarBehavior StatusBarColor="{dx:ThemeColor SurfaceContainerLow}" StatusBarStyle="DarkContent" />
    </ContentPage.Behaviors>
    <!-- Get colors by their tonal palette indexes -->
    <VerticalStackLayout HorizontalOptions="Fill" Spacing="8" Padding="16" BackgroundColor="{dx:ThemeTertiaryColor Light=10, Dark=100}">
        <!-- Get color by its name -->
        <Label Text="Faux Available" FontAttributes="Bold" FontSize="14" TextColor="{dx:ThemeColor OnSurface}"/>
        <Label Text="This plant is appropriate for beginners" FontSize="12" TextColor="{dx:ThemeColor OnSurface}"/>
        <Button Text="Open File" BackgroundColor="{dx:ThemePrimaryColor Light=40, Dark=80}"/>
    </VerticalStackLayout>
</ContentPage>

• C#

using DevExpress.Maui;
using DevExpress.Maui.Core;

// ...
public static class MauiProgram {
    public static MauiApp CreateMauiApp() {
        ThemeManager.UseAndroidSystemColor = false;
        ThemeManager.Theme = new Theme(ThemeSeedColor.TealGreen);
        var builder = MauiApp.CreateBuilder();
        builder
            .UseDevExpress() 
            // ...
            .UseMauiApp<App>();
        return builder.Build();
    }
}

The following example shows how to create styles and bind colors from DevExpress themes to properties of standard controls. Use the Resources/Styles/Styles.xaml file to specify implicit styles for standard controls.

View Example: DevExpress .NET MAUI Controls - Apply Themes to Standard Controls

Refer to the following article for additional information on how to select a color for a control element: Material 3 Design Kit on Figma.