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.

Lottie animations with 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 👋