Working with SVG Images in Light and Dark Mode

[chsWeb]

It would be useful to have a section in the documentation that covers how to apply light/dark mode to SVG images.

For example, I have a logo that has a color scheme for light mode and dark mode.

Light Mode Logo

<path d="M96.6797 46.712V41.048H81.0317V31.736H95.0477V26.312H81.0317V17.288H96.6797V11.624H74.8877V46.712H96.6797Z" fill="#1D1E1E"/>
<path d="M103.725 46.712L108.717 38.888L113.757 46.712H120.477L112.653 35L120.717 23H114.141L109.101 31.064L103.869 23H97.0528L105.213 35.096L97.0528 46.712H103.725Z" fill="#1D1E1E"/>
<path d="M128.382 47.336C132.078 47.336 135.294 45.656 136.302 43.208L136.734 46.712H141.87V32.312C141.87 25.736 137.934 22.28 131.55 22.28C125.118 22.28 120.894 25.64 120.894 30.776H125.886C125.886 28.28 127.806 26.84 131.262 26.84C134.238 26.84 136.158 28.136 136.158 31.352V31.88L129.054 32.408C123.438 32.84 120.27 35.576 120.27 39.944C120.27 44.408 123.342 47.336 128.382 47.336ZM130.302 42.92C127.662 42.92 126.222 41.864 126.222 39.704C126.222 37.784 127.614 36.584 131.262 36.248L136.206 35.864V37.112C136.206 40.76 133.902 42.92 130.302 42.92Z" fill="#1D1E1E"/>
<path d="M150.599 46.712V33.272C150.599 29.432 152.855 27.608 155.639 27.608C158.423 27.608 160.199 29.384 160.199 32.696V46.712H166.055V33.272C166.055 29.384 168.215 27.56 171.047 27.56C173.831 27.56 175.655 29.336 175.655 32.744V46.712H181.463V31.208C181.463 25.736 178.295 22.28 172.535 22.28C168.935 22.28 166.151 24.056 164.951 26.792C163.703 24.056 161.207 22.28 157.607 22.28C154.199 22.28 151.799 23.816 150.599 25.784L150.119 23H144.743V46.712H150.599Z" fill="#1D1E1E"/>
<path d="M184.332 57.704H190.188V43.544C191.676 45.944 194.748 47.336 198.3 47.336C205.356 47.336 209.388 41.96 209.388 34.568C209.388 27.128 204.972 22.28 198.3 22.28C194.7 22.28 191.58 23.864 190.14 26.6L189.756 23H184.332V57.704ZM190.236 34.856C190.236 30.584 192.876 27.608 196.908 27.608C201.036 27.608 203.484 30.632 203.484 34.856C203.484 39.08 201.036 42.056 196.908 42.056C192.876 42.056 190.236 39.128 190.236 34.856Z" fill="#1D1E1E"/>
<path d="M217.075 46.712V11H211.267V46.712H217.075Z" fill="#1D1E1E"/>
<path d="M230.945 47.336C237.137 47.336 241.457 44.216 242.465 39.032H237.041C236.369 41.288 234.257 42.536 231.041 42.536C227.153 42.536 224.945 40.424 224.513 36.248L242.369 36.2V34.424C242.369 27.032 237.857 22.28 230.753 22.28C223.793 22.28 218.945 27.416 218.945 34.856C218.945 42.2 223.889 47.336 230.945 47.336ZM230.801 27.08C234.305 27.08 236.561 29.24 236.561 32.504H224.657C225.233 28.952 227.345 27.08 230.801 27.08Z" fill="#1D1E1E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7679 31.88C36.0959 35.336 33.2159 37.416 29.0879 37.416C24.3839 37.416 21.0879 33.992 21.0879 29.096C21.0879 24.136 24.3199 20.712 28.9599 20.712C33.6959 20.712 36.7039 23.88 36.7039 28.808V29.992L24.7999 30.024C25.0879 32.808 26.5599 34.216 29.1519 34.216C31.2959 34.216 32.7039 33.384 33.1519 31.88H36.7679ZM32.8319 27.528C32.8319 25.352 31.3279 23.912 28.9919 23.912C26.6879 23.912 25.2799 25.16 24.8959 27.528H32.8319Z" fill="#489CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M58 29C58 45.0163 45.0163 58 29 58C12.9837 58 0 45.0163 0 29C0 12.9837 12.9837 0 29 0C45.0163 0 58 12.9837 58 29ZM34.7988 15L29 9.20093L23.2012 15H15V23.201L9.20117 28.9999L15 34.7988V43H23.2012L29 48.799L34.7988 43H43V34.7988L48.7988 28.9999L43 23.201V15H34.7988Z" fill="#489CFF"/>
</svg>

Dark Mode Logo

<svg width="243" height="58" viewBox="0 0 243 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M96.6797 46.712V41.048H81.0317V31.736H95.0477V26.312H81.0317V17.288H96.6797V11.624H74.8877V46.712H96.6797Z" fill="#C9CACB"/>
<path d="M103.725 46.712L108.717 38.888L113.757 46.712H120.477L112.653 35L120.717 23H114.141L109.101 31.064L103.869 23H97.0528L105.213 35.096L97.0528 46.712H103.725Z" fill="#C9CACB"/>
<path d="M128.382 47.336C132.078 47.336 135.294 45.656 136.302 43.208L136.734 46.712H141.87V32.312C141.87 25.736 137.934 22.28 131.55 22.28C125.118 22.28 120.894 25.64 120.894 30.776H125.886C125.886 28.28 127.806 26.84 131.262 26.84C134.238 26.84 136.158 28.136 136.158 31.352V31.88L129.054 32.408C123.438 32.84 120.27 35.576 120.27 39.944C120.27 44.408 123.342 47.336 128.382 47.336ZM130.302 42.92C127.662 42.92 126.222 41.864 126.222 39.704C126.222 37.784 127.614 36.584 131.262 36.248L136.206 35.864V37.112C136.206 40.76 133.902 42.92 130.302 42.92Z" fill="#C9CACB"/>
<path d="M150.599 46.712V33.272C150.599 29.432 152.855 27.608 155.639 27.608C158.423 27.608 160.199 29.384 160.199 32.696V46.712H166.055V33.272C166.055 29.384 168.215 27.56 171.047 27.56C173.831 27.56 175.655 29.336 175.655 32.744V46.712H181.463V31.208C181.463 25.736 178.295 22.28 172.535 22.28C168.935 22.28 166.151 24.056 164.951 26.792C163.703 24.056 161.207 22.28 157.607 22.28C154.199 22.28 151.799 23.816 150.599 25.784L150.119 23H144.743V46.712H150.599Z" fill="#C9CACB"/>
<path d="M184.332 57.704H190.188V43.544C191.676 45.944 194.748 47.336 198.3 47.336C205.356 47.336 209.388 41.96 209.388 34.568C209.388 27.128 204.972 22.28 198.3 22.28C194.7 22.28 191.58 23.864 190.14 26.6L189.756 23H184.332V57.704ZM190.236 34.856C190.236 30.584 192.876 27.608 196.908 27.608C201.036 27.608 203.484 30.632 203.484 34.856C203.484 39.08 201.036 42.056 196.908 42.056C192.876 42.056 190.236 39.128 190.236 34.856Z" fill="#C9CACB"/>
<path d="M217.075 46.712V11H211.267V46.712H217.075Z" fill="#C9CACB"/>
<path d="M230.945 47.336C237.137 47.336 241.457 44.216 242.465 39.032H237.041C236.369 41.288 234.257 42.536 231.041 42.536C227.153 42.536 224.945 40.424 224.513 36.248L242.369 36.2V34.424C242.369 27.032 237.857 22.28 230.753 22.28C223.793 22.28 218.945 27.416 218.945 34.856C218.945 42.2 223.889 47.336 230.945 47.336ZM230.801 27.08C234.305 27.08 236.561 29.24 236.561 32.504H224.657C225.233 28.952 227.345 27.08 230.801 27.08Z" fill="#C9CACB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7679 31.88C36.0959 35.336 33.2159 37.416 29.0879 37.416C24.3839 37.416 21.0879 33.992 21.0879 29.096C21.0879 24.136 24.3199 20.712 28.9599 20.712C33.6959 20.712 36.7039 23.88 36.7039 28.808V29.992L24.7999 30.024C25.0879 32.808 26.5599 34.216 29.1519 34.216C31.2959 34.216 32.7039 33.384 33.1519 31.88H36.7679ZM32.8319 27.528C32.8319 25.352 31.3279 23.912 28.9919 23.912C26.6879 23.912 25.2799 25.16 24.8959 27.528H32.8319Z" fill="#489CFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M58 29C58 45.0163 45.0163 58 29 58C12.9837 58 0 45.0163 0 29C0 12.9837 12.9837 0 29 0C45.0163 0 58 12.9837 58 29ZM34.7988 15L29 9.20093L23.2012 15H15V23.201L9.20117 28.9999L15 34.7988V43H23.2012L29 48.799L34.7988 43H43V34.7988L48.7988 28.9999L43 23.201V15H34.7988Z" fill="#489CFF"/>
</svg>

I've seen some discussions online about how to handle this, but to have it explicitly covered in the Pico Css docs would be great.

How is everyone currently insuring that the right colors are applied to SVGs in light and dark mode?

[vardumper]

So let me just throw around some ideas:

• Why not use a custom icon font for this purpose? As long as your logo is vectors, monochromatic (black and transparent background), that gives you a lot of possibilities to colorise it as simple as color: #708090. You could even achieve multi-colored logos if you stack differently colored layers on top of each other with absolute positioning and z-index.
  IMHO the preferred way to go. (use Glyphs or Birdfont)

• another option is to simply add both images as siblings to the DOM and toggle visibility with like this:

<html onload="this.data-theme=((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light')">
...
<img id="logodark" src="some.svg" />
<img id="logolight" src="other.svg" />

html[data-theme="dark"] #logodark {display:block;}
html[data-theme="dark"] #logolight {display:hidden;}
html[data-theme="light"] #logodark {display:hidden;}
html[data-theme="light"] #logolight {display:block;}

the JS onload bit in the HTML element is just to make sure the attribute is set immediately and you will want to extend that so it gets the stored theme (from session or localStorage etc)

• and of course with javascript you could switch the src from additional data attributes when the themeSwitcher is used.

<img src="default.svg" data-src-dark="dark.svg" data-src-light="default.svg" />

[vardumper]

Honestly, I think I have missed a couple of years of advances in frontend technologies. My apologies. So while the icon font solution, I mentioned above works – handling of such fonts is painful compared to the convenience of SVGs.
I just recently watched this video tutorial on how to animate SVGs. At around minute 5 he's explaining how to style the SVGs color by putting it inline into the DOM. This might also be a good solution for a logo.

The disadvantage is, that the DOM of your HTML grows, the SVG cannot be cached like when it would be in your CSS or in a separate SVG file. <img src="/som/image.svg" />.

The advantage is that yes you can style the SVG with CSS. svg#logo g#duotone-one { fill: var(--duotone-color-one); }...
And you don't need two versions in two modes.

In the design I am working on, I have a couple of illustrations used as background images. Altogether they weigh around 200 KBs.
If I wanted to color them with CSS, I only have two options:
option 1) If I add them to each page of the website, the HTML is blown up, so each page will be 200 KBs bigger than necessary, so load a bit slower.
option 2) If I add them to the theme's color modes, the CSS will be 400KBs bigger than necessary. But at least it would be cached. Only the initial load time would be slow.

I decided to go with option 3)
I'll create 2 versions of each SVG, and hardcode the fill color into the SVGs XML. So I will have:

• illustration-dark.svg
• illustration-light.svg
  For me this is optimal. CSS will be small. HTML will be small and the SVGs can be cached forever.
  I cannot animate color changes, but can transition the images position, opacity, and so on.

[jonyhayama]

Just throwing another idea there:

You can have those svg's in variables, something like this (untested):

:root {
  --logo-dark: url("SOME SVG");
  --logo: url("SOME SVG");
}
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --logo: var(--logo-dark);
  }
}
[data-theme="dark"] {
  --logo: var(--logo-dark);
}
#site-title {
  font-size: 0;
}
#site-title:before {
  content: var(--logo);
}

<h1 id="site-title">Site Title</h1>

[chsWeb]

This seems pretty elegant @jonyhayama.