Using AppThemeBinding in code

[JohnHDev]

Hi, I am trying to setup and use a number of styles in c# that support dark mode. All the examples I see are XAML, I want to do this in code but it appears the AppThemeBinding class is internal, although it used within the .NET Maui code base to setup styles for classes like RadioButton.

If AppThemeBinding is available in XAML, how can I access it in c#?

Thanks
John

[JohnHDev]

And just like that I found the answer, which is of course to use the AppThemeBindingExtensions class.

[JohnHDev]

Hmm, I can't get it to work however. Given the following code in a new ContentPage constructor:

Resources["myColor1"] = Colors.Red;
Resources["myColor2"] = new AppThemeBindingExtension() { Light = Colors.LightGray, Dark = Colors.DarkGray };

this.SetDynamicResource(ContentPage.BackgroundColorProperty, "myColor2");

When BackgroundColorProperty is set to myColor1, the background colour is red as expected.
When BackgroundColorProperty is set to myColor2, the background colour is not set and doesn't change when switching appearance.

[stephenquan]

In Microsoft.Maui.Controls there are two extension methods you can use:

    public static void SetAppTheme<T>(this BindableObject self, BindableProperty targetProperty, T light, T dark) => self.SetBinding(targetProperty, new AppThemeBinding { Light = light, Dark = dark });
    public static void SetAppThemeColor(this BindableObject self, BindableProperty targetProperty, Color light, Color dark)
			=> SetAppTheme(self, targetProperty, light, dark);

You also can make use of:

    Application.Current.RequestedTheme
    Application.Current.RequestedThemeChanged

Here's how you may go about using these to solve your problem:

        // Solution 1
        this.SetAppTheme(ContentPage.BackgroundColorProperty, Colors.LightGray, Colors.DarkGray);

        // Solution 2
        this.SetAppThemeColor(ContentPage.BackgroundColorProperty, Colors.LightGray, Colors.DarkGray);

        // Solution 3
        this.SetValue(ContentPage.BackgroundColorProperty, Application.Current.RequestedTheme == AppTheme.Light ? Colors.LightGray : Colors.DarkGray);
        Application.Current.RequestedThemeChanged += (s, e) =>
        {
            this.SetValue(ContentPage.BackgroundColorProperty, Application.Current.RequestedTheme == AppTheme.Light ? Colors.LightGray : Colors.DarkGray);
        };

[breyed]

These solutions work for setting the themed colors on views, but don’t show how to set it on a style in the same way that is done in XAML in the MAUI template:

<Style TargetType="ActivityIndicator">
    <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
</Style>

[breyed]

Using the MAUI community toolkit, you can use AppThemeColor to get a binding to apply to a style.

var style = new Style(typeof(ActivityIndicator));
style.Setters.Add(ActivityIndicator.ColorProperty, new AppThemeColor { Light = Primary, Dark = Colors.White }.GetBinding());
Resources.Add(style);

[gabsamples6]

We don’t use app theme bindings at all .all we do is to use a resource dictionary x theme then at runtime all u have todo is switch resource file .i can expand if still not clear. This way when you bind you use a dynamic resource and that is it

[breyed]

How does the view know when you’ve changed resource dictionaries, e.g. when the user switches from light to dark mode while using the app?

[gabsamples6]

Dynamicresource is the key -we can support as many themes as we like
Light theme-dark theme-purple etc

in each resource dictionary you define your colors

Entry text color={dynamicresource primary text color}

Etc. sorry typing from phone..

[stephenquan]

I revisited this issue and found a solution that exposes AppThemeBinding as a BindingBase. Once expressed as a regular binding, it can be used anywhere a binding is accepted, including inside styles. The idea is to create a temporary bindable object, apply SetAppTheme(...) to it, and then project the themed value back out via a one‑way binding:

public static class AppThemeBindingBase
{
    public static BindingBase Create(object? light, object? dark, Element? parent = null)
    {
        var b = new Button { Parent = parent ?? Application.Current };
        b.SetAppTheme(Button.CommandParameterProperty, light, dark);
        return BindingBase.Create(static (Button b) => b.CommandParameter, BindingMode.OneWay, source: b);
    }
}

Resources["MyContentPageStyle"] = new Style(typeof(ContentPage))
{
    Setters =
    {
        new Setter
        {
            Property = ContentPage.BackgroundColorProperty,
            Value = AppThemeBindingBase.Create(Colors.LightGray, Colors.DarkGray)
        }
    }
};