Lacks CSS theming / fill & stroke colors not changeable in CSS

[rossbulat]

The dot lottie player seemingly ignores all external CSS rules, even if important!, with the inline fill and stroke attributes always taking precedence.

This is troublesome for theming (we don't really want to maintain 2 versions of the icons for light, dark modes).

Perhaps I am missing something but I am not seeing a way to inject classes or change the default colors of dot lottie animations.

It would be useful for the <dotlottie-player> tag to take a svgStyle attribute that would allow us to access the CSS directly within the shadow root.

[samuelOsborne]

hi @rossbulat Are you talking about styling the player, or styling your animations using css classes?

[rossbulat]

hi @rossbulat Are you talking about styling the player, or styling your animations using css classes?

Hey @samuelOsborne, thanks for following up! I'm talking about styling animations using css classes.

[samuelOsborne]

@rossbulat Great. This is due to using the shadow DOM, I was looking in to ways of disabling its uses via a prop. This will fix the issue, will try and get a fix out for this week and ping you

[rossbulat]

@samuelOsborne Fantastic, thank you! Looking forward to testing, this will definitely cut down on the complexity of hosting multiple variations of SVG 👍

[rossbulat]

Hey @samuelOsborne, did I miss the publish?

[samuelOsborne]

Hey @rossbulat no, haven't gotten round to finishing it unfortunately

[rossbulat]

Hey @rossbulat no, haven't gotten round to finishing it unfortunately

Ah ok, I will keep an eye out for updates!

[samuelOsborne]

hey @rossbulat we're going with a better solution that will be released towards the end of this month, so I wont be implementing removing the shadowDOM for the moment

[rossbulat]

Thanks for the update @samuelOsborne, looking forward to seeing the solution!