Sign in button background color not displayed correctly

[lkoehl]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

The sign in button from the login form doesn't always show the correct background color. You can take a look at #106 where I provided screenshots of the example project.

To Reproduce

Check the codesandbox for a MWE. Remove line 6 in App.tsx and compare the background color of the sign in button.

If you also check App.module.css you can see, that it is an empty file.

Expected behavior

The background color of the login button remains consistent.

[silentworks]

But line 6 is your app code. This is a very confusing example of the issue as the variable on line 6 isn't being used anywhere, this is not an Auth UI issue, this is an application code issue. If you remove line 28 - 41 you will see the default theme.

[lkoehl]

@silentworks I don't fully understand the problem. I can see it being an application issue as well as an Auth UI issue. As you said, that line 6 is not used anywhere, it should not affect the code. But it does affect it, even the default theme!
I removed lines 28 - 41 and uncommented/commented line 6 again, and the default theme view changes (see screenshots). Since I don't fully understand the implementation of the UI library, I can't pinpoint the problem. But the custom app code is a fix for a bug reported in #106. Without line 6, the sign in button isn't styled correctly. This leads me to believe that it is an Auth UI issue.

Without the fix in line 6 (note that the background color is not applied properly)

With line 6 (default theme)

[silentworks]

@lkoehl ah I see what you mean, I've changed this back to a bug and will investigate it further to try and find what's going wrong here. It looks like something is leaking into the css variables and how they work from the app code.

[SandersTDavid]

I encountered this issue while using a custom theme and hex colors for the brand and brandAccent. However, I resolved it by switching to the rgb() format, and the button background filled in with my custom color as expected.