Dark and Light mode color change

[jaypatel2889]

Hey all. Does anyone have experience working with Lottie in Dark and Light mode and changing the color in each mode in Lottie 3.5? I have tried using ColorValueProvider with AnimationKeypath though it would require to know KeyPath name for each code in order to map.

I have also used ColorValueBlock in ColorValueProvider but it just returns first match if we provide dynamic filters like **.Color. It would nice to get all keypaths so colors can be mapped.

Does anyone have worked with both mode and know how to change change colors dynamically without giving static keypath names?

[calda]

Since Lottie is primarily a series of CALayers that render CGColors, there isn't a great way to provide a single color that automatically varies based on the system dark mode setting.

I think the simplest approach would probably be to have two different Lottie assets -- one for light mode, one for dark mode, and dynamically use one of the other in your app.

Doing this through a ColorValueProvider requires hardcoding all of the keypath strings, like you mentioned, which is tedious and complicated for large animations.

We don't currently have a simpler solution for this, unfortunately. Some approaches I could imagine include:

1. Updating the LottieColor schema to support both a light mode color and dark mode color, within the same animation. This may not be a viable approach since most Lottie file are exported from After Effects, which I assume doesn't have this concept.
2. Extend the DotLottie file format to support including a light mode and dark mode variant of the animation. Then we could automatically switch between them based on the current setting, which no action needed for consumers.

[JohanForsellTibber]

Any news/progress on these ideas for dark/light mode solutions?

[mlch911]

Any news/progress on these ideas for dark/light mode solutions? (from 2024)

[ethyaan]

Since it's using paths in my case inside svg.
I used below trick to achieve my changes.
I targeted the colors that I want to change only.

.dark .levels svg path[stroke="rgb(18,19,49)"] {
  stroke: white;
}

Before

After

[kentslaney]

for my black and white logo, filter: invert(1) worked