[UWP] Change Lottie Animation Color / Theme Dynamically

Question

I have used lottie json animation in xaml uwp using "CommunityToolkit.WinUI.Lottie" and "AnimatedVisualPlayer".

But for dark theme I can not see the lottie animation as the color is fixed. How can we dynamically change color of lottie animation?

<Page x:Class="Lottie_Test.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:Lottie_Test"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      xmlns:lottie="using:CommunityToolkit.WinUI.Lottie"
      mc:Ignorable="d"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Background="White">
        <Border Background="Transparent"
                BorderThickness="3"
                BorderBrush="Transparent"
                Width="30"
                Height="30"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
            <muxc:AnimatedVisualPlayer x:Name="VoiceWaveLottiePlayer"
                                       AutomationProperties.Name="Lottie animation"
                                       AutoPlay="True">
                <lottie:LottieVisualSource x:Name="LottieJsonSource"
                                           Options="All"
                                           UriSource="ms-appx:///Assets/lottie_equalizer.json" />
            </muxc:AnimatedVisualPlayer>
        </Border>
    </Grid>
</Page>

Answer 1

Hi @Md. Niaz Mahmud ,

Let me summarize this issue

It is recommended to use Theme Listner to dynamically switch json files, then the UI will change with the theme.

using Microsoft.Toolkit.Uwp.UI.Helpers;
 public MainPage()
 {
     this.InitializeComponent();
     var Listener = new ThemeListener();
     Listener.ThemeChanged += Listener_ThemeChanged; 
 }
 private void Listener_ThemeChanged(ThemeListener sender)
 {
     var theme = sender.CurrentTheme;
     if (theme == ApplicationTheme.Dark)
     {
         LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/LightBulb.json");
     }
     else
     {
         LottieJsonSource.UriSource = new System.Uri("ms-appx:///Assets/LottieLogo1.json");
     }
 }

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.