How to customize a theme in daisy-ui?

Question

1. I want to customize a theme in daisyui. Is it possible to customize i.e. the dark theme (just fix one color, or add a further color-entry)?

2. Furthermore: is it possible to add a new color entry to your custom theme?

I.e. I tried the following without success:

  daisyui: {
    styled: true,
    themes: [
      "light", // first one will be the default theme
      "dark",
      {
        mytheme: {
          primary: "#793ef9",
          "new-color": "#eff1ae",
          "primary-focus": "#570df8",
        },
      },
      "cupcake",
    ],
  },

...but when I use the new color new-color, in my css (theme("colors.new-color")). I get following error:

(146:7) /home/armwur/code/booking-overview/src/index.css 'colors.new-color' does not exist in your theme config. 'colors' has the following valid keys: 'inherit', 'current', 'transparent', 'black', 'white', 'neutral', 'primary', 'primary-focus', 'primary-content', 'secondary', 'secondary-focus', 'secondary-content', 'accent', 'accent-focus', 'accent-content', 'neutral-focus', 'neutral-content', 'base-100', 'base-200', 'base-300', 'base-content', 'info', 'success', 'warning', 'error'

  144 |  }
  145 |   .fast-table tr:hover td {
> 146 |       background-color: theme('colors.new-color');
      |       ^
  147 |  }
  148 |   .fast-table th, .fast-table td {

I need to add a custom color-entry. How is that possible?

Answer 1

1. What you are trying to do is create another theme. Here's how editing an existing theme can be done:

module.exports = {
  //...
  daisyui: {
    themes: [
      {
        light: {
          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
          primary: "blue",
          "primary-focus": "mediumblue",
        },
      },
    ],
  },
}

Further info can be found here.

2. This can also be done by adding your CSS into the theme:

[data-theme="mytheme"] .btn {
  border-width: 2px;
  border-color: black;
}

Further info can be found here.

Answer 2

To change a color in a default theme in DaisyUI

EDIT: OUTDATED

1. Find the theme colors at: https://github.com/saadeghi/daisyui/blob/master/src/colors/themes.js
2. Add the entire theme to tailwind.config.cjs, change whatever you want.

daisyui: {
        themes: [
          {'dark': {
            "primary": "#793ef9",
            "primary-focus": "#570df8",
            "primary-content": "#ffffff",
            "secondary": "#f000b8",
            "secondary-focus": "#bd0091",
            "secondary-content": "#ffffff",
            "accent": "#37cdbe",
            "accent-focus": "#2aa79b",
            "accent-content": "#ffffff",
            "neutral": "#2a2e37",
            "neutral-focus": "#16181d",
            "neutral-content": "#ffffff",
            "base-100": "#3d4451",
            "base-200": "#2a2e37",
            "base-300": "#16181d",
            "base-content": "#ebecf0",
            "info": "#66c6ff",
            "success": "#87d039",
            "warning": "#e2d562",
            "error": "#ff6f6f"
          }},
          'light',
        ]
    }

I don't know how you would go about adding a new color to your theme though...

Answer 3

1. For customizing theme you can visit official docs and see some examples.
2. While there's no explanation of how to add a custom color variable, it's been discussed on github. Here is example:

//tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: 
      {
        "title": 'hsl(var(--title))', // color-variable
      }
    },
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
        {
        light: {
          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
          '--title': '50, 53%, 34%'
        },
        dark: {
          ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
          '--title': '0, 0%, 100%'
        }
      }
    ]
  },
}