Lottie Animations With Dark Themed Websites š

Having a dark theme for your website and apps is becoming common practice. A dark theme creates less eye strain for your users and improves battery life. But if you have Lottie animations how do you adapt to having a light and dark theme? You could create two versions of the animation and switch them depending on the theme being used, but creating two versions can be a pain. One solution to this problem could be by using SVG filters.
If youāre animating icons, you most likely use a single stroke colour. This is where SVG filters can really shine and save you some time. Ok lets get in to how itās going to work.
1) Create the CSS class
SVG filters are available through CSS. Because are icons are starting with a black stroke colour, lets create a CSS class that will change it to white:
.filter-w {
filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(254deg) brightness(108%) contrast(101%);
}
When this class is applied to our <div> element containing the Lottie animation it will turn it from black to white. Exactly what we need when going dark š.
2) Applying the CSS class
This is going to depend on how youāre implementing your website. Personally I use Nuxt.js with the ācolor-modeā module to manage light and dark theming so this is how itās setup in HTML:
<div :class=ā{ āfilter-wā: $colorMode.preference === ādarkā }ā>
<lottie-interactive
:path=āitem.pathā
:interaction=āitem.interactionā
:s-width=āitem.strokeWidthā
:s-color=āitem.strokeColorā
class=āpt-3"
/>
</div>
The filter class is applied to the parent div of my <lottie-interactive> element when the website is in dark mode, turning the animations white.
Lottie-interactive is a library I made that easily adds interactions for Lottie animations within a single custom element, you can check it out here:
https://github.com/samuelOsborne/Lottie-interactive
3) More colours š
If you want to be able to change your animation to more colours than just white use this awesome little Codepen by Sosuke to generate the CSS filter needed for the colour you want:
https://codepen.io/sosuke/pen/Pjoqqp
Pop this filter in to another class and apply it when a user clicks on a button for example and marvel as your Lottie animation changes colour in front of you!
Thanks for reading! I also make tutorials in video form if thats more your thing check out my channel here:
https://www.youtube.com/channel/UCPPNxV39UlVo3emNQSNNTug
You can also check out my website for animated icons and more over at https://svgenius.co š