Button background color not rendering correctly

[stephengladney]

Expectation: The discord button on my app's homepage should have an indigo-500 background color and white text.

Reality: Some users are seeing a white button with white text.

Environment: Windows Chrome (Version 143.0.7499.170) - also happening after upgrading to 144 as well as Chrome on iOS

I cannot reproduce neither on my Macbook Pro Chrome (144.0.7559.60) nor on Chrome on my iPhone but this has been reported several times to me by various users.

Source:

<div className="animate-slide-up stagger-3 flex flex-row items-center lg:justify-start justify-center lg:flex-row gap-4 mt-8 w-full max-w-xl">
             <a
               href={!isLoading && !session ? "/login" : "/play"}
               // className="flex-1"
             >
               <button className="hidden lg:block bg-gradient-to-r from-green-500 to-green-400 text-black font-bold rounded-lg h-14 hover:shadow-2xl hover:shadow-green-400/50 transition-all duration-300 transform relative overflow-hidden group">
                 <span className="relative z-10">Start Playing Now</span>
               </button>
             </a>
             <a
               href="https://discord.gg/gdhRZSsTHc"
               className="hover:shadow-2xl hover:shadow-indigo-700"
             >
               <button className=" bg-indigo-500 text-white font-bold rounded-lg h-14">
                 <FaDiscord className="inline mr-2 text-2xl" />
                 <span className="relative z-10">Join the Discord</span>
               </button>
             </a>
</div>

[RobinMalfait]

Can you share a minimal reproduction repo so I can take a look?

Making a big assumption here but the space in front of the className tells me that you might be generating classNames dynamically and/or that it's coming from some other place (API, Database, ...) at "runtime" is that the case?

[stephengladney]

@RobinMalfait Here is a minimal reproduction repo. I've verified the issue is still happening here. https://github.com/stephengladney/edhlab-repro

[stephengladney]

I'm able to re-create the issue locally by setting my OS appearance to Light mode.

[stephengladney]

The issue was a class added by default by Vite in the index.css. Removing this resolved the issue.

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}