color palette: what's the purpose and how to use neutral and neutral-content?

[ivanminutillo]

First of all, a huge thankyou for building daisy, It's such a great project!
I'm currently using it build bonfire and it made our lives much more easier. 🥇

I have a doubt about the usage of neutral and neutral-content color.
Imo they work great for texts / widgets that needs to differentiate from the base and base-content contents, wihtout being drammatically different. This means that I can use text-neutral-content together with text-base-content (using the same background) without affecting the accessibility of the content.
This behaviour already works pretty well on dark themes, but on light ones is almost illegible.

Eg. We use text-neutral-content to highlight the context of a reply in the timeline:

but if I switch to the light theme, the context of the reply is illegbile:

Where the only other possibility would be to use text-base-content/opacity, but this would likely results in accessibility issues and also from a UX point of view, it would not create enough differentiation from the 2 contents.

Is there somewhere a reference on how colors are meant to be used and for what? Did I misunderstood the scope of neutral and neutral-content?

[saadeghi]

Thank you 💙

Is there somewhere a reference on how colors are meant to be used and for what? Did I misunderstood the scope of neutral and neutral-content?

The table here is the reference on how to use each color name: https://daisyui.com/docs/colors/

I have a doubt about the usage of neutral and neutral-content color.

Let's say on a light theme, we're using a light color (base-100) for the background and a dark color (base-content) for the text. It looks good. If we need a section with opposite colors we can use the SE colors in reverse: base-content for the background and base-100 for the text. It looks good and we get a dark section in a light backgrounded page.

But there will be a problem on a dark theme. The above scenario on a dark theme will reverse all colors. So we get a dark background with light text and then there's a big light colored section with dark text in the middle of a dark backgrounded page. That will hurt eyes.

So we need another semantic color here. A dark neutral color that we can use for the UI but it doesn't need to be associated with brand colors like primary, secondary, etc. It should allow us to have a dark section on both light and dark theme. It can be a shade of gray. It can be the same color on both light and dark themes or it can be a little bit darker on the dark theme.

That's why the neutral color name exists. To provide a neutral dark color for the UI which can be used on both light and dark themes.

but if I switch to the light theme, the context of the reply is illegbile

You should only use *-content colors on their own background to make all color pairs accessible. For example primary-content text should be used on primary background. neutral-text should be used on neutral background. base-content text should be used on base-100/200/300 backgrounds. This will guarantee that all color pairs will look readable and will have enough contrast on all themes.

Where the only other possibility would be to use text-base-content/opacity, but this would likely results in accessibility issues and also from a UX point of view, it would not create enough differentiation from the 2 contents.

I think it's okay to use opacity. For example if your background is light and you want 3 different shades of dark text, you can use different opacities and there will be no accessibility issues because the visual result is the same if we lower the opacity of dark text on light background or if we lower the lightness of the color itself: https://play.tailwindcss.com/4Xx1htZfS6

Let me know if you have any questions.