A Next.js Image Component that allows you to shows a different image in light and dark-mode, based on the users preference.
Using Yarn:
yarn add next-image-themedUsing NPM:
npm install next-image-themedimport ThemedImage from "next-image-themed";
import LightModeImage from "assets/images/light-mode.png";
import DarkModeImage from "assets/images/dark-mode.png";
const MyComponent = () => (
<ThemedImage
// The image to show in light-mode.
light={LightModeImage}
// The image to show in dark-mode.
dark={DarkModeImage}
// Pass the rest of the props to the Image component as you normally would.
alt='My Image'
loading='lazy'
/>
);