Understanding the problem
If you've ever tried to display SVG images with transparent backgrounds in dark mode, you might have noticed that they become invisible. This is because the background color of the page is dark, making the SVG image blend in.
The easiest solution for this is to use a background, but if it's light, it can be very bright for people who use dark mode. In this article, we'll explore a better solution to this problem: inverting the colors of the SVG image when the theme changes.
Prepare your CSS
In the global CSS file (e.g.,
style.css), create a CSS variable with the initial value of
none for the light theme. The name of the CSS variable goes after
-- I called it
:root pseudo-class represents the root element in the DOM tree which is technically the
html element but with higher specificity.
Let's apply the CSS variable to the
filter property in the same CSS file:
In this example, I only want to invert the colors of SVG images inside blog posts, so I put the
article selector in front of
var() function here inserts the value of our CSS variable.
We need to create a helper function that updates the CSS variable based on the current theme value. If theme is
light CSS variable is
none, if theme is
dark we apply
hue-rotate() functions to the
Provided values works well for inverting the colors of SVG images because the
invert(93%) flips the color scheme of the image while the
hue-rotate(180deg) function shifts the colors by 180 degrees, ensuring that the resulting image has a natural look and is easily recognizable. However, these values may need to be adjusted depending on the specific colors and shades used in the SVG image.
Trigger the function
We use the
useEffect() react hook on the page that triggers this function when the theme changes.
Look at the result
Inverting colors technique is simple to implement and helps to make sure that our SVG images remain visible regardless of the theme that your users prefer.
You can see an example of this technique in action by visiting my blog post titled «How to Find a Duplicate in an Array of Positive Numbers with Constant Space Complexity», where I have used it to invert the colors of the SVG images in dark mode.
Thank you for your time! Please follow me on twitter, and if you have a question, feel free to ask.