switch image based on light and dark mode doesn't work well ?
here i need to swap between 2 images based on theme mode
like if it light i need logo-1 but if it dark i need it to be logo-2
with using this code from below but no luck
import { unstable_getImgProps as getImgProps } from 'next/image'
export function Logo() {
const common = { alt: 'logo', width: 40, height: 30 }
const { props: { srcSet: dark } } = getImgProps({ ...common, src: '/images/logo/logo.webp' })
const { props: { srcSet: light , ...rest } } = getImgProps({ ...common, src: '/images/logo/logo-2.webp' })
return (
<picture>
<source
media="(prefers-color-scheme: dark)"
srcSet={dark} />
<source media="(prefers-color-scheme: light )" srcSet={light} />
<img {...rest} />
</picture>
)
}
it's working on dark mode if i swap between 2 images it just worked fine but no luck with light mode
it doesn't update at all if i switching between light and dark does anyone has similar issue and how i can fix it ?
like if it light i need logo-1 but if it dark i need it to be logo-2
with using this code from below but no luck
import { unstable_getImgProps as getImgProps } from 'next/image'
export function Logo() {
const common = { alt: 'logo', width: 40, height: 30 }
const { props: { srcSet: dark } } = getImgProps({ ...common, src: '/images/logo/logo.webp' })
const { props: { srcSet: light , ...rest } } = getImgProps({ ...common, src: '/images/logo/logo-2.webp' })
return (
<picture>
<source
media="(prefers-color-scheme: dark)"
srcSet={dark} />
<source media="(prefers-color-scheme: light )" srcSet={light} />
<img {...rest} />
</picture>
)
}
it's working on dark mode if i swap between 2 images it just worked fine but no luck with light mode
it doesn't update at all if i switching between light and dark does anyone has similar issue and how i can fix it ?
