Next.js Discord

Discord Forum

Change image with theme

Unanswered
Standard Chinchilla posted this in #help-forum
Open in Discord
Standard ChinchillaOP
I have an image on my page, I want it to change with the theme(with other image), when I first load page

20 Replies

Next theme? Or just manual setup?
Standard ChinchillaOP
i'm using next-theme
Clown
Then just use the useTheme() hook from next-theme and then do conditional rendering
Change the url around depending on the theme from useTheme()
Clown
@Standard Chinchilla is your problem solved?
Standard ChinchillaOP
nop
because i do that
@Clown Change the url around depending on the theme from useTheme()
Standard ChinchillaOP
.
  const lightLogoURL =
  "https://media.discordapp.net/attachments/1116888339967119460/1157748996434051173/image1.png?ex=6519bd46&is=65186bc6&hm=86275a0c1f15eea403bb28ba672d1d4e9c10fcaa1c53b1ee170aea990ff451c1&=&width=340&height=472";
  const darkLogoURL =
  "https://media.discordapp.net/attachments/1116888339967119460/1157748996069142618/image.png?ex=6519bd46&is=65186bc6&hm=d26b0960292e3c8675c97108275e1580d50cb79fb9ad036a88c4e28c5d260940&=&width=354&height=473";
  
  const { theme } = useTheme();
  const imageUrl = theme === "light" ? lightLogoURL : darkLogoURL;
  console.log(theme);
  return (
            <img src={imageUrl} alt="Logo" width={40} height={40}/>
)
the console.log() print dark and light in the client, but also in the terminal of vscode(i'm running it there) but there print undefined
the system works when you change the theme multiple times but, the first time doesn´t work
Clown
I assume it starts out as the darkLogo regardless of what your current theme is?
Clown
Either way i think this should still work. The only problem that might be there is that useTheme isn't available instantly and you need to wait for the client.
because it doesn´t work
@Standard Chinchilla how i do that?
Clown
You'll have to create a state variable and set it to true in useEffect. Then only return the image if that variable is true
Standard ChinchillaOP
ok i try that