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?

Answer 1

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/