Switching SVG fills for dark mode

March 16, 2020

2 min read

SVG for dark mode

Few methods

I’m using Eleventy to load in a list of previous clients, stored in JSON:

Example list here

Because the website has a light and dark mode I really wanted to transition my logos so they stood out each time without needing to add offset Colors. Basically on the dark mode I wanted light icons and on the light mode I wanted dark icons. This turned out to be more difficult than previously thought. In next or some other JavaScript based interactive page I would just look at the current theme and then adjust the logo displayed. In fact I was looking at next for this website and nearly went with it - only switching to eleventy at the last minute (write a post on this as well sometime).

But this is eleventy, and I was hoping to minimise the JavaScript being used to keep the blog as static as possible.

Few possibilities:

  • Images swapped out with JavaScript
  • Inline svg
  • Referenced svg
  • Svg as data uri
  • Css background images which get swapped out with css classes but didn’t want to use css bg images

Ended up using 2 img with a src pointing to the svg file, with class, and then showing the image when the theme changes. This does mean we load 2 images for each logo but as they are svg they are both very small files.