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?

[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.

[JessMTermini]

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.

I wholeheartedly disagree. There are many reasons to use more than 12 colors in a design, in fact, sticking with the same 12 (exact hues) colors everywhere often makes sites/designs boring, dull, flat, and/or bland. Colors are important, and subtle shifts in hues often takes a flat design to a whole other level. There are near inifinite hues or red, green, yellow, blue etc, that can be used in any part of a design, not just badges, if you use them properly, it will eleveate your design and will not make it "cartoonish" at all (unless that is your intention). Combining subtle shifts in hue with the right tint, shade ot tone can make all the difference!! -- and it is sad to see that adding more then the alloted 12 daisyUI colors is not more integrated into the whole of the current daisyUI system.

[saadeghi]

@JessMTermini I think there's a misunderstanding.
daisyUI does not limit the color usage in the UI. We can use any color using Tailwind CSS utility classes.
daisyUI, by default has 20 color roles, used in daisyUI components which can change based on daisyUI themes.
✅ We can add more colors if needed.
✅ We can customize the colors of components if needed.
✅ We can use any Tailwind CSS utility class to set any color on any component.

Nothing is impossible here. daisyUI has 20 colors by default, which is more than enough for majority of UIs but if your UI needs 50 colors, there's no limit. You can use 50.

Please let me know if you have any questions.

[pdanpdan]

Why do you want to use the most complex path.

Choose one of the main colors and redefine it as you wish for that component: https://play.tailwindcss.com/v1wUxN3w3e

:) the reply was for the one above