Light/dark mode on SVGs

Add a fill="currentColor" property to the root <svg> element. Remove any fill properties on the paths inside.

On this site, I use a custom Figure component, that sets the inline property on svgs. At build time, Lume’s inline plugin replaces the <img> element with the SVG’s code.

In your CSS, you can add a rule for the svg:

.figure {
  color: var(--my-amazing-colour);
}

and you can have --my-amazing-colour change depending on the theme.

Enjoy your newly flashbang-proof diagrams!