I’m making a reddit SSO button and am running into an issue where the custom theme I made for the Reddit button turns secondary-grey when it’s disabled.
Here is my theme in the tailwind.config
daisyui: {
themes: [
{
reddit: {
primary: "#FF4500", // Reddit primary
secondary: "#FF5700",
accent: "#888888",
neutral: "#3d4451",
"base-100": "#ffffff",
info: "#3ABFF8",
success: "#36D399",
warning: "#FBBD23",
error: "#F87272",
disabled: "#FF450080", // Muted primary color, this does not work
},
},
],
}
Here’s how it looks non-disabled, everything is good:
But here is how it looks when the button disabled:
Sure I could do an !important or something to override the color, but I’m assuming Daisy should have some way to handle the disabled state via adding a theme or similar.
What is the correct approach to adding a custom color for a disabled button state in Daisy/Tailwind?
And here is the button code for reference
<button
onClick={onSignin}
disabled={isAuthenticating}
className="ml-2 text-white btn btn-primary group btn-block"
data-theme="reddit"
>
<div className="z-10">
{isAuthenticating ? "Signing in..." : "Sign in with"}
</div>
<RedditIcon className="h-6 -ml-2.5" />
</button>