How I Added Light & Dark Theme SVGs on my Website

As my website uses light and dark themes it was important for the icons and other SVGs that I use to support it.

Meher Howji avatar image
··· Likes

There were many options that I tried, I think one with the currentColor option but the one that worked seamlessly was this little snippet, you place it right after the SVG tag and it just works.

I also use Next-ThemesExternal link icon that fully supports dark mode, including system preference with prefers-color-scheme and also immediately syncs this between tabs.

In a gist, the prefers-color-scheme is a CSS media feature used to detect the user's preferred color scheme or theme set in their operating system or device settings. Also, you can read more about it in MDNExternal link icon.

<svg width="351" height="348" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1">
  <style>
    svg {
      fill: #232323;
      stroke: #444;
    }
    @media (prefers-color-scheme: dark) {
      svg {
        fill: #999888;
        stroke: #fafafa;
      }
    }
  </style>
  <g>
    <title>Layer 1</title>
    <g id="svg_440">
      <path>.....</path>
    </g>
  </g>
</svg>