Override button color in daisy UI?

Question

Daisy UI has buttons: https://daisyui.com/components/button/

However, I'd like to override the colors for a specific button, without having to go through the effort of creating an entire theme.

I can just use bg-green-500 on a button, but that will just change the background color, when I also need to change all of the associated colors.

Is there a good way to do this?

If I set a daisy ui button to "success" color--it doesn't just change the background. It also changes the outline / shadow / etc. — Foobar, May 01 '22 at 22:19
Can you share the code or a reproducible example that how you are using it? — MagnusEffect, May 02 '22 at 05:59

score 0 · Answer 1 · answered Feb 12 '23 at 14:46

AFAIK, to do this you override the current theme in the tailwind.config.js file.

Note that you import the theme's base:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{ts,tsx,jsx,js}"],
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
          primary: "#7cb3dd",
      
        },
      },
    ],
  },
  plugins: [require("@tailwindcss/typography"), require("daisyui")],
};

Here, we're overriding the primary color to #7cb3dd for the' light' theme.

Adjust as needed!

Here's more info: https://daisyui.com/docs/themes/

Override button color in daisy UI?

1 Answers1