Hi, currently I'm trying to display different image urls depending on the current theme.
The following code is what I copied from next-themes (https://www.npmjs.com/package/next-themes). I found that it doesn't work very well.
It does work if I simply switch the theme. But whenever I refresh, I find that the image source is neither light nor dark, but the default one.
And my theme might not be only light and dark, might have some other term of theme.

import Image from 'next/image'
import { useTheme } from 'next-themes'

function ThemedImage() {
const { resolvedTheme } = useTheme()
let src

switch (resolvedTheme) {
case 'light':
src = 'https://www.fakeurlA.com'
break
case 'dark':
src = 'https://www.fakeurlB.com'
break
default:
src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
break
}

return <Image src={src} width={400} height={400} />
}

export default ThemedImage