For a long time I have struggled to use SVG images in CSS for background images. I like this approach because it allows me to use a background image to place an icon without relying on an icon font. But the biggest issue has always been color. An SVG in CSS as a background image will have whatever color is coded into the SVG. If I want to change that color in response to user interaction or color mode preference, I have relied on either a media query or CSS compiled with SASS so that I could use a color variable in the SVG code.

This year, I am being stubborn about abandoning SASS or any other sort of compiled CSS. It’s 2025 and there should be ways to do things with plain CSS.

So last night I was puzzing over how I am going to style a select element with a custom icon that will change color based on color mode preference. I don’t want to use SASS and I don’t want to rely on a media query.

Then I stumbled upon background-blend-mode. I have a vague recollection of using this property before, but that was a long time ago, and I had forgotten about it. With blend mode, I can have the color of the custom icon on my select element change according to the background on which it appears. The background color of my select element is already responding to the preferred color mode using the light-dark() color function. With the background-blend-mode: exclusion, I am able to select a color for the icon that will work on either a light or dark background.

This property has been widely supported for some years now, so no worries about cross-browser compatibility.