AppThemeBinding is a .NET MAUI markup extension for giving a property one value in light mode and another in dark mode. It follows the operating system’s active light or dark setting, so an app can adapt without presenting its own mode selector. Use it where a visual value must remain usable and coherent across both modes. section 10.1.2 section 10.4
Place the extension in a XAML property value and provide Light and Dark alternatives. Each alternative can refer to a resource, which keeps theme colors named and reusable rather than embedding color values throughout views. The following gradient selects different resource colors for each system mode. section 10.1.2
Listing 10.5 The BackgroundGradient resource
<LinearGradientBrush x:Key="BackgroundGradient"
StartPoint="0,1" EndPoint="1,0"> #1
<GradientStop Color="{AppThemeBinding Light={
StaticResource PrimaryBackground}, Dark={
StaticResource PrimaryDarkBackground}}" Offset=
"0"/> #2
<GradientStop Color="{AppThemeBinding Light={
StaticResource SecondaryBackground}, Dark={
StaticResource SecondaryDarkBackground}}” Offset=
"1"/> #2
</LinearGradientBrush>
Inspect a reusable LinearGradientBrush whose two gradient stops each choose light and dark color resources with AppThemeBinding. section 10.1.2
Apply AppThemeBinding to visual properties that need theme-aware alternatives:
- Set an ActivityIndicator color differently for light and dark mode, such as Primary in light mode and PrimaryDark in dark mode. section 10.1.2
- Set backgrounds for pages, buttons, flyouts, tab bars, and navigation bars with paired light and dark resources. section 10.1.2
- Use it for card colors in a CollectionView so report items remain appropriate in either mode. section 10.3.1
AppThemeBinding handles system light and dark mode; it is distinct from changing an app-selected theme at run time. A theme can contain colors and styles, while DynamicResource can update views when a color palette changes. A theme using StaticResource can still include AppThemeBinding to support both system modes. section 10.1.2 section 10.4
Theme-aware report cards
A report page displays inventory in card-like CollectionView items. AppThemeBinding supplies the card’s colors so the same mobile-oriented layout works with both light and dark themes. This adapts color treatment, not the page’s layout for larger desktop or tablet screens. section 10.3.1 section 10.1.2
Prefer named color or brush resources for repeated values, then reference them from AppThemeBinding in styles. Keep a fixed value when it already contrasts in both modes; for example, white button text can remain unchanged when both button backgrounds are dark enough. section 10.1.2
