DaisyUI Custom theme handle disabled button

Question

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>

Answer 1

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>"