If you’ve ever worked with CSS variables on a project, you know one of the main challenges is getting color contrast to work correctly. When the background color changes, the text color (which should have high contrast) might not work as well. Often we handle this by having a --color-contrast variable, but this added complexity builds up quickly.
This article goes into an alternative way that uses CSS and SVG filters to let the browser apply the contrast automatically. The CSS-only alternative has a problem with fringing, but the SVG one seems straightforward enough and gets rid of that issue. That’s pretty clever!
I assume the main drawback of that approach is that you don’t have full control over the text color, so if having an exact color is crucial to you, then you’re still stuck with hardcoding color variables.