Color Themes for DevExpress .NET MAUI Controls

• Sep 06, 2024
• 6 minutes to read

DevExpress .NET MAUI Controls ship with 10 built-in color themes that are available in both 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 higher.

Apply System Colors to System Bars

You can use the following properties to apply theme colors to a device’s bars:

Property	Description
AndroidNavigationBarForeground	Gets or sets the theme that is used by the device’s navigation bar icons (Android OS only).
AndroidNavigationBarBackground	Gets or sets the background color of the device’s navigation bar (Android OS only).
AndroidStatusBarBackground	Gets or sets the status bar’s background color (Android OS only).
StatusBarForeground	Gets or sets the theme that is used in the device’s navigation bar icons.
ApplyThemeToSystemBars	Gets or sets whether the color theme is applied to system bars.

C#

ThemeManager.Theme = new Theme(ThemeSeedColor.DarkGreen);
ThemeManager.AndroidNavigationBarForeground = AppTheme.Light;

In XAML

Use the SystemBarBehavior class to set the bar’s colors in XAML:

XAML

<ContentPage ...>
    <ContentPage.Behaviors>
        <dx:SystemBarBehavior StatusBarForeground="Light" AndroidNavigationBarBackground="DarkGreen" />
    </ContentPage.Behaviors>
</ContentPage>

SystemBarBehavior includes the following properties:

Property	Description
AndroidNavigationBarBackground	Gets or sets the background color of the device’s navigation bar (Android OS only). This is a bindable property.
AndroidNavigationBarForeground	Gets or sets the theme that is used by the device’s navigation bar icons (Android OS only). This is a bindable property.
AndroidStatusBarBackground	Gets or sets the status bar’s background color (Android OS only). This is a bindable property.
StatusBarForeground	Gets or sets the theme that is used in the device’s navigation bar icons. This is a bindable property.

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:

ThemeColorExtension

Implements a XAML markup extension that gets color theme colors by theme color key.

ThemePrimaryColorExtension

Implements a XAML markup extension that allows you to get the color theme’s primary color.

ThemeSecondaryColorExtension

Implements a XAML markup extension that allows you to get the color theme’s secondary color.

ThemeTertiaryColorExtension

Implements a XAML markup extension that allows you to get the color theme’s tertiary color.

ThemeNeutralColorExtension

Implements a XAML markup extension that allows you to get the color theme’s neutral color.

ThemeNeutralVariantColorExtension

Implements a XAML markup extension that allows you to get the color theme’s neutral variant color.

ThemeErrorColorExtension

Implements 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.