Extend colors of the existing colors palette

[imaliouris]

It would be great if we could have a way to extend the current colors.

i.e.

@plugin "daisyui/theme" {
    name: "mytheme";
    default: true;
    prefersdark: false;
    color-scheme: light;
    --color-light: #f7f7f7;
    --color-light-content: black;
}

I would expect the --color-light to create a new class btn-light etc. as all the other colors do

[saadeghi]

We can add new colors:
https://daisyui.com/blog/how-to-add-new-colors-to-daisyui/

The components won't be generated for the custom colors automatically. You have to add them like:

.btn-light {
  --btn-color: var(--color-light);
  --btn-fg: var(--color-light-content);
}

Example: https://play.tailwindcss.com/PbTT1ojUIT?file=css

Is it a good idea to have a button called light? Do you want it to be bright on on all themes?

[saadeghi]

Is there any plan to support this use case, where components are generated automatically when a new color is added?

I don't think this is a good idea. Components must be designed to have specific colors in specific situations.

The current daisyUI color system is flexible for almost any legit design system.

I can help better if I know what is the goal here.
Please tell me about the design challenge that needs you to add more variants.
A practical example would be helpful.

[anthonylex]

One use case i have is the extend the Badges.
I use them to show tags and statuses and have those data points tied to colours for easy of identifying.

[saadeghi]

@anthonylex Example: https://play.tailwindcss.com/2OhyFdG6nf

<span class="badge bg-orange-500">orange-500</span>
<span class="badge bg-red-500">red-500</span>
<span class="badge bg-blue-500">blue-500</span>
<span class="badge bg-green-500">green-500</span>
<span class="badge bg-teal-500">teal-500</span>

[anthonylex]

Yeah thats functional but if you using soft or outline then you also need to remember to do the correct border.
Or if your bg colour is one that needs a different text color, it would still be good to have this setup the same way the rest are with the utility classes.

[saadeghi]

You're right. And it is possible to customize the way you described.
This won't be available as default in the library tho.

Let's say you have tags for 10 different sports: Football, Tennis, Swimming, etc.

Using random colors for these tags might sound like a good idea to visually distinguish tags but it creates more confusion than giving benefit.

If all tags are same color:

• it looks more professional
• it gives the tags same weight.

If Football is green, Tennis is red, Swimming is yellow, etc:

• it makes the whole page more cartoony
• it creates a confusing that why Football is green? Is that positive data and Tennis is negative? 🤔 Out of context these colors are meaningful in UI.
• it destroys the value of actual positive/negative UI elements. For example if you have a red delete button, and a green save button on the site. They won't be seen as negative or positive elements anymore as we used these colors for other parts.