Icon colour/theme compatibility

I’m writing a WebExtension. I have a monochrome icon which I’m trying to get working in both light/dark themes with little success.

This bug suggests we can use SVG and have the icon recoloured on the fly, but I’ve not been able to get this to happen. https://bugzilla.mozilla.org/show_bug.cgi?id=1207597

Is there a way with WebExtensions to specify a SVG icon that can be recoloured to suit? Or alternatively, what’s the best practice for getting icons to look good across all the various themes out there?

The MDN docs on icons aren’t super helpful here.

At the moment there doesn’t appear to be a good way to do this, but there’s a bug being currently tracked for 56 that should fix this:

https://bugzilla.mozilla.org/show_bug.cgi?id=1329242

1 Like