Chakra UI app is not being rendered properly on Chrome

Viewed 107

I'm following a youtube tutorial on a MERN stack project. It uses Chakra UI for the frontend. But I've noticed a weird issue. The app looks perfectly fine on Firefox, but not on Chrome. I have attached the images to show the difference/problem.

While trying to solve the problem, I noticed that the app looks fine in incognito mode on chrome also. I changed the chrome profile to a profile that I don't use often, and the app looks fine on that as well. So, it seems like the problem is with the chrome profile that I use generally. I have also tried disabling the extensions that I have, but it's still not rendering properly. I also tried removing the browser cache, but no success. I don't want to remove the entire data from my profile. Can you please explain what is causing this issue and what might solve it?

The app looks like this on Chrome:

The app looks like this on Firefox:

1 Answers

I'm guessing you're using colorScheme for your buttons and that Chrome is on dark mode and Firebox is on light mode. Colors schemes have different colors for each theme. For more control on which colors are used you can try:

<Button color="white" bg="blue">Log In</Button>
Related