Making dark mode compatible SVG images

I recently added dark mode support to my website. While doing so I found a neat trick to make SVG images that changes colors depending on if dark mode is active or not.

Inside a SVG image you can use CSS style sheets as usual. I made a favicon in Inkscape, optimized it’s size using SVGOMG and then added the following CSS to change the color when dark mode is active:

<style>
    @media (prefers-color-scheme:dark) {
    path {
        fill: #e3e3e3
    }
    }
</style>

Ends up looking like this:

You can try toggle between light and dark mode in your browsers developer tools and see how the color changes.

For some figures I’ve made in LibreOffice Draw I instead added CSS to replace specific colors with dark mode friendly colors when dark mode is active:

<style type="text/css">
@media (prefers-color-scheme: dark)
{
    :root { --background-color: #1f1f1f; --text-color: #e3e3e3;}
    [stroke="rgb(0,0,0)"] { stroke: var(--text-color); }
    [stroke="rgb(255,255,255)"] { stroke: var(--dark-color); }
    [fill="rgb(0,0,0)"] { fill: var(--text-color); }
    [fill="rgb(221,221,221)"] { fill: var(--background-color); }
    [fill="rgb(255,255,255)"] { fill: var(--background-color); }
}
</style>