Color Themes for DevExpress .NET MAUI Controls
- 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:
- Set the UseAndroidSystemColor property to
false
. - 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.
- Pass the created theme to the ThemeManager.Theme property.
The following code sample applies the predefined Brown color theme:
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:
- Set the UseAndroidSystemColor property to
false
. - Use the Theme.ctor(Microsoft.Maui.Graphics.Color) constructor to create a new color theme based on a custom seed color.
- Pass the created theme to the ThemeManager.Theme property.
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:
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 |
---|---|
Android |
Gets or sets the theme that is used by the device’s navigation bar icons (Android OS only). |
Android |
Gets or sets the background color of the device’s navigation bar (Android OS only). |
Android |
Gets or sets the status bar’s background color (Android OS only). |
Status |
Gets or sets the theme that is used in the device’s navigation bar icons. |
Apply |
Gets or sets whether the color theme is applied to system bars. |
ThemeManager.Theme = new Theme(ThemeSeedColor.DarkGreen);
ThemeManager.AndroidNavigationBarForeground = AppTheme.Light;
#In XAML
Use the SystemBarBehavior class to set the bar’s colors in XAML:
<ContentPage ...>
<ContentPage.Behaviors>
<dx:SystemBarBehavior StatusBarForeground="Light" AndroidNavigationBarBackground="DarkGreen" />
</ContentPage.Behaviors>
</ContentPage>
SystemBarBehavior includes the following properties:
Property | Description |
---|---|
Android |
Gets or sets the background color of the device’s navigation bar (Android OS only). This is a bindable property. |
Android |
Gets or sets the theme that is used by the device’s navigation bar icons (Android OS only). This is a bindable property. |
Android |
Gets or sets the status bar’s background color (Android OS only). This is a bindable property. |
Status |
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:
- A seed color (a ThemeSeedColor value).
- A set of generated colors (a TonalPalette instance) for each core color (primary, secondary, tertiary, neutral, neutralvariant, and error).
- 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:
<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>
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.
Refer to the following article for additional information on how to select a color for a control element: Material 3 Design Kit on Figma.