#Change image with theme

21 messages · Page 1 of 1 (latest)

sullen aurora
#

I have an image on my page, I want it to change with the theme(with other image), when I first load page

image.png image.png
umbral minnowBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

dusty estuary
#

Next theme? Or just manual setup?

sullen aurora
#

i'm using next-theme

dusty estuary
#

Then just use the useTheme() hook from next-theme and then do conditional rendering

#

Change the url around depending on the theme from useTheme()

dusty estuary
#

@sullen aurora is your problem solved?

sullen aurora
#

nop

#

because i do that

sullen aurora
# 
  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

dusty estuary
#

I assume it starts out as the darkLogo regardless of what your current theme is?

#

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.

sullen aurora
sullen aurora
#

because it doesn´t work

dusty estuary
# sullen aurora how i do that?

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