How can I toggle the theme of the SfBusyIndicator between light and dark? - From F186293

[Christopher Hofmeister]

First of all I would like to ask if there isn't a way to do this in styles.xaml? It seems a shame to introduce an entirely new way of theming the app just for Syncfustion controls when there is already one built into maui.

I attached a sample project from the GitHub example: https://github.com/SyncfusionExamples/Switching-between-light-and-dark-themes-in-.NET-Maui/tree/master

In the App.xaml file I added colors to override the default theme.

    Green

    Blue

    White

    Orange

    Red

    Black

The first time the program loads it obeys the colors. But after that it just reverts to the default color theme.

Could you demonstrate how to switch color themes?

Attachment: Switchingbetweenlightanddarkthemesin.NETMaui_10183ae2.zip

[Brundha Velusamy]

Hi Christopher,

We have verified the query and made the necessary adjustments to the provided sample according to your requirements. In the updated sample, we have included two different resource dictionaries with distinct colors for the same theme key. When switching between the light and dark themes, we have appropriately modified the MergedDictionaries based on our specific requirements, as illustrated in the code snippet below.

Please review the attached file for your reference, and feel free to share any concerns you may have.

 

Here's the code snippet for your reference,

public partial class MainPage : ContentPage

{

    ResourceDictionary lightTheme = new CustomLightTheme();

    ResourceDictionary darkTheme = new CustomDarkTheme();

 

    private static ResourceDictionary _mergedDictionaries=new();

    public MainPage()

    {

        InitializeComponent();

    }

 

    private void Button_Clicked(object sender, EventArgs e)

    {

        ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;

        if (mergedDictionaries != null)

        {

            var theme = mergedDictionaries.OfType<SyncfusionThemeResourceDictionary>().FirstOrDefault();

 

 

            if (theme != null)

            {

                if (theme.VisualTheme is SfVisuals.MaterialDark)

                {

                    theme.VisualTheme = SfVisuals.MaterialLight;

                    AddLightTheme(mergedDictionaries);

                }

                else

                {

                    theme.VisualTheme = SfVisuals.MaterialDark;

                    AddDarkTheme(mergedDictionaries);

                }

            }

            ReloadResources();

        }

    }

 

    private void AddLightTheme(ICollection<ResourceDictionary> mergedDictionaries)

    {

        mergedDictionaries.Remove(darkTheme);

        mergedDictionaries.Add(lightTheme);

    }

    private void AddDarkTheme(ICollection<ResourceDictionary> mergedDictionaries)

    {

        mergedDictionaries.Remove(lightTheme);

        mergedDictionaries.Add(darkTheme);

    }

 

    public static void ReloadResources()

    {

        _mergedDictionaries.Clear();

        InitResources();

    }

 

    public static void InitResources()

    {

        foreach (ResourceDictionary item in Application.Current.Resources.MergedDictionaries)

        {

            List<string> keyList = new(item.Keys);

 

            for (int i = 0; i < keyList.Count; i++)

            {

                string k = keyList[i];

                item.TryGetValue(k, out var value);

                if (value != null)

                {

                    _mergedDictionaries[k] = value;

                }

            }

        }

    }

}

Regards,

Brundha V

Attachment: BusyIndicatorTheme_f99bb3b2.zip