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>
As per the source code for Daisy UI's button:
.btn {
…
&.btn-disabled,
&[disabled],
&:disabled {
@apply bg-neutral text-base-content border-opacity-0 bg-opacity-20 text-opacity-20;
}
@media (hover: hover) {
&-disabled:hover,
&[disabled]:hover,
&:disabled:hover {
@apply bg-neutral text-base-content border-opacity-0 bg-opacity-20 text-opacity-20;
}
}
}
Disabled buttons take their background color from the neutral
color. So, you could:
Change the neutral
color:
daisyui: {
themes: [
{
reddit: {
…
neutral: "…",
Have a custom rule in your CSS that overrides this rule:
.btn-primary:is(.btn-disabled, [disabled], :disabled) {
background-color: …
}
Use some Tailwind class
<button
…
className="ml-2 text-white btn btn-primary group btn-block disabled:bg-<color>"