Dynamic theme switching

[Roman Jasek]

Hi all,

what is the recommended way to switching dynamic theme switching in MAUI?

In Xamarin we used the approach of replacing the LightTheme and DarkTheme resource dictionaries in code, i.e.

var previousTheme = application.Resources.MergedDictionaries.OfType<Syncfusion.XForms.Themes.LightTheme>().FirstOrDefault();
if (previousTheme is not null)
{
    application.Resources.MergedDictionaries.Remove(previousTheme);
}
application.Resources.MergedDictionaries.Add(new Syncfusion.XForms.Themes.DarkTheme());

We found Syncfusion.Maui.Themes.LightThemeColors ​and Syncfusion.Maui.Themes.DarkThemeColors​ in MAUI, however if we try to use them in the same way the application crashes at creating a new instance of the DarkThemeColors ​class (the same goes for LightThemeColors if we try to swap them the other way around).
What approach is the recommended way of switching Syncfusion controls' theme?

[AhamedAliNishad JahirHussain]

Hi Roman,

We have reviewed your query and would like to inform you that the correct code for dynamically changing the theme in the button-click event is demonstrated in the following code snippet. Additionally, we have attached samples for your reference. However, please be aware that there is a known issue in the .NET 8.0 framework when using these themes. It's working fine in .NET 7.0.

We have already logged this issue with the .NET MAUI team, and we will provide updates as soon as we receive relevant information.

For further details, you can refer to the GitHub issue:

Link : Getting AccessViolationException while adding custom resource dictionary in App.Xaml file · Issue #19535 · dotnet/maui (github.com)

Please refer to the below code snippet :

 private void SfButton_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.SfVisualTheme is SfVisuals.DarkDefault)

             {

                 theme.SfVisualTheme = SfVisuals.LightDefault;

             }

             else

             {

                 theme.SfVisualTheme = SfVisuals.DarkDefault;

             }

         }

     }

 }

 

App.xaml

 

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:DynamicTheming"

             xmlns:theme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"

             x:Class="DynamicTheming.App">

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />

                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />

                <theme:SyncfusionThemeResourceDictionary SfVisualTheme="LightDefault"/>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

</Application>

 

Regards,

Ahamed Ali Nishad.

Attachment: Samples_72c4861.zip

[Joe Lepore]

It looks like the github bug you reported was just updated with a workaround that requires an attribute be added to your theme.

I am hoping someone can look at this and get the workaround into a weekly build.
I am trying to get this working.

[AhamedAliNishad JahirHussain]

Hi Joe,

 

Currently, we are testing the suggested workaround, and we will inform you once we have included the fix in the weekly release. We appreciate your patience until then.

 

Regards,

Ahamed Ali Nishad.

[AhamedAliNishad JahirHussain]

Hi Joe ,

Query : Dynamic theme switching

We previously reported a theming issue to the Microsoft .NET MAUI team. They provided a workaround, and as promised, we have incorporated the fix for the reported issue, "Getting AccessViolationException when adding theme," in our latest weekly NuGet release v24.2.7 which is available for download (  https://www.nuget.org/ ). We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you would require any further assistance.

For your reference, we have attached a sample demonstrating the dynamic theming changes. Kindly review it and let us know the details.

Code Snippet :

Mainpage.xaml

 

   <StackLayout VerticalOptions="Center" HorizontalOptions="Center">

       <buttons:SfButton Text="Change Theme" Clicked="SfButton_Clicked"/>

   </StackLayout>

 

Mainpage.xaml.cs

 

      private void SfButton_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.SfVisualTheme is SfVisuals.DarkDefault)

                  {

                      theme.SfVisualTheme = SfVisuals.LightDefault;

                      Application.Current.UserAppTheme = AppTheme.Light;

                  }

                  else

                  {

                      theme.SfVisualTheme = SfVisuals.DarkDefault;

                      Application.Current.UserAppTheme = AppTheme.Dark;

                  }

              }

          }

      }

 

App.xaml

 

<?xml version = "1.0" encoding = "UTF-8" ?>

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:DynamicTheming"

             xmlns:theme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core"

             x:Class="DynamicTheming.App">

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />

                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />

                <theme:SyncfusionThemeResourceDictionary SfVisualTheme="LightDefault"/>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

</Application>

 

Regards,

Ahamed Ali Nishad.

Attachment: DynamicTheming8.0_6e6250d1.zip

[Raphael M]

Hi,

Was this resolved?

Regards,

Rufw

[Kamalesh Periyasamy]

Hi Raphael,

 

We are pleased to inform you that the issue has been successfully resolved on our end. We recommend utilizing our latest weekly NuGet package, which includes the fix. Please update your dependencies accordingly. If you have any questions, please don't hesitate to reach out to us.

 

Regards,

Kamalesh P