Support for AppThemeBindings

[HobDev]

The docs have the SetAppThemeColor() and SetAppTheme(). This way I have to declare the colors on each UI element. There should be some better way to share style among the UI elements in C#. C# markup must support to declare the style once and use it throughout the app.

 Style labelStyle = new Style(typeof(Label))
            {
                Setters =
            {
                new Setter{Property=Label.TextColorProperty, Value=new AppThemeBindingExtension{Dark= new StaticResourceExtension{ Key="White"}, Light=new StaticResourceExtension{Key ="Black"} } }
            }

            };

Finally use the style in UI :

new Label{Text = "Hello World" , HorizontalOptions=LayoutOptions.Center, VerticalOptions=LayoutOptions.Center}.Style(AppStyles.labelStyle),

[bijington]

@HobDev you can declare styles and assign them to the App.Resources property like we do here: https://github.com/CommunityToolkit/Maui.Markup/blob/main/samples/CommunityToolkit.Maui.Markup.Sample/App.cs This is more a feature of global styles in .NET MAUI rather than something we provide in the markup package.

Is there something else you would like to see?

[HobDev]

@bijington Thank you for the answer. I want to support dark mode in the app. I am using C# markup to write the UI and styles. I want to use AppThemeBinding to support the light and dark mode. But it does not work. Is it possible to include dark mode support in the sample. Specifically the use of AppThemeBinding.
If AppThemeBinding is still not supported would you recommend to start a new proposal for supporting it in C# markup.

[bijington]

We don't current provide extension methods to make the use of AppThemeBindings simpler so I would certainly be happy if you wanted to open a new proposal on supporting their use within Styles.

All of that being said AppThemeBinding should still be technically supported as per your original example. Sorry I haven't had a chance to see if your original example works but if it did then it could currently be rewritten to:

new Style<Label>(
    (Label.TextColorProperty, new AppThemeBindingExtension { Dark = new StaticResourceExtension{ Key = "White"}, Light = new StaticResourceExtension{Key = "Black"} }))

If you are declaring your colors in a single place you could just refer to those as constants e.g.

const Color darkThemeTextColor = Colors.White;
const Color lightThemeTextColor = Colors.Black;

new Style<Label>(
    (Label.TextColorProperty, new AppThemeBindingExtension { Dark = darkThemeTextColor, Light = lightThemeTextColor }))

It does appear that the AppThemeBinding class is internal to .NET MAUI but we should still be able to use it within the markup toolkit to provide extensions on the Style class.

[chandra-arifin]

the codes not reflect "instant" change of the color when themes changed by user.
but your code so helpful, i make it with following codes (application must restart for changes the color)

if (Application.Current.PlatformAppTheme == AppTheme.Dark) { Resources = new ResourceDictionary() { DarkTheme Here....} } else { Resources = new ResourceDictionary() { LightTheme Here....} }

[HobDev]

@brminnick Can you help with this

[HobDev]

Open an issue for this discussion over here.

[bijington]

Perhaps we could expose something like:

public static VisualElement BackgroundColor(this VisualElement visualElement, Color lightModeColor, Color darkModeColor)
{
    AppThemeBinding appThemeBinding = new
    {
        Light = lightModeColor,
        Dark = darkModeColor
    };
    visualElement.SetBinding(VisualElement.BackgroundColorProperty, appThemeBinding);

    return visualElement;
}

This would allow for the UI to be built as we currently do but allow for the application to respond to theme changes. We could of course roll this out over all of our other extension methods (e.g. Placeholder, Text, etc.).

I would need to check whether this works with the Style methods too but I think it should or we should be able to make it work.

[CliffAgius]

issue #76 answers most of this the rest is being Closed as per the Community Stand-up discussion here: https://youtu.be/N9wMcBP4jtg?t=2889