How to change image on dark/light mode in Nextjs

In Nextjs we can change the images according to the dark mode or light mode.

The display property can be used to toggle images according to mode change. Provided that the theme provider class is installed in your project, and that the dark /light mode is working fine, then the following code can be used to change images:

Now with this code the image also changes along with the theme change.

Consider the logo in dark mode,

When clicking on the Lottie, the theme changes to light mode. At the same time the logo also changes according to the theme.

Leave a comment

Your email address will not be published. Required fields are marked *