SVG for dark mode
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.
- 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.