I'm not sure I am fully understanding the 'content' colour feature. Could someone explain what I am doing wrong?

[PaulHaze]

So I am really enjoying DaisyUI and love the semantic way of naming colours so there is only one colour name for both dark and light modes. Really speeds up the dev process.

I've been starting to tweak themes and add my own custom colours but I am getting a little unsure of what exactly the -content modifier does. Take neutral in particular. Looking at Daisy's docs it seems that the -content colour setting is optional, and as I understand it, this colour is what will be applied to all 'content' within the top level block that has a colour applied.

For example in this instance I expect the block bg to be neutral, and the block text to be neutral-content:

<div class="mr-5 h-40 w-40 bg-neutral flex-center">
	<p class="">Test</p>
</div>

Yet even though the colour of the bg changes, the text content doesnt. The only way I can set the text to the be neutral-content is to actually specifiy it:

<p class="text-neutral-content">Test</p>

So a few questions:

1. Is this how it IS supposed to work?
2. Is there anyway I can get it so that it DOES apply the content to colour to any 'content' that is inside a block with bg-primary or bg-secondary etc?
3. Lastly are the content colours generated automatically from any custom colours I add to a theme or do I need to add them specifically? As in, if I modify a theme so it looks something like this:

light: {
        primary: '#a991f7',
	secondary: '#f6d860',
	accent: '#37cdbe',
	neutral: '#919191',
	'base-100': '#fefefe',
}

Are all the content colours generated automatically based on the colours above? Or do the defaults remain and I need to put them if I want something other than the defaults?

Thanks in advance....

[saadeghi]

as I understand it, this colour is what will be applied to all 'content' within the top level block that has a colour applied.

Only for daisyUI components. For example when you use btn-primary the background color will be primary and the text color will be primary-content

For example in this instance I expect the block bg to be neutral, and the block text to be neutral-content:

<div class="mr-5 h-40 w-40 bg-neutral flex-center">
	<p class="">Test</p>
</div>

Yet even though the colour of the bg changes, the text content doesnt. The only way I can set the text to the be neutral-content is to actually specifiy it:

<p class="text-neutral-content">Test</p>

Is this how it IS supposed to work?

Yes. Because when you use the Tailwind CSS utility class bg-neutral it only sets the background color. It would be unexpected if we set the text color for a utility class that is supposed to be for background color only.

So yes, every time you use bg-neutral you have to use text-neutral-content as well, so the color contrast of foreground/background will be what you expect it to be. We do this for daisyUI components by default. For example btn-neutral has bg-neutral + text-neutral-content. We should not set a text color for a utility class like bg-* because Tailwind CSS utility class bg-* should only set tbe background color, not text color.

Is there anyway I can get it so that it DOES apply the content to colour to any 'content' that is inside a block with bg-primary or bg-secondary etc?

You can add a custom class name for your project like

.color-primary {
  @apply bg-primary text-primary-content;

But I would suggest simply use both class names bg-primary text-primary-content because it will be easier to modify the color opacity if needed. Like bg-primary text-primary-content/50

3. are the content colours generated automatically from any custom colours I add to a theme or do I need to add them specifically? As in, if I modify a theme so it looks something like this:

light: {
        primary: '#a991f7',
	secondary: '#f6d860',
	accent: '#37cdbe',
	neutral: '#919191',
	'base-100': '#fefefe',
}

Are all the content colours generated automatically based on the colours above?

For a custom theme it will automatically generate a foreground color with a good contrast for each of these colors. For example if the primary color is a light color and you don't specify a content color for it, it will generate a dark content color and if primary is a dark color it will generate a light content color for it.

You can play with colors here and see the results:
https://daisyui.com/theme-generator/

Press button to see all optionall colors.

Let me know if you have any questions.

[PaulHaze]

Thanks for such a detailed response. The approach makes sense. I ended up going with a similar approach you suggested in my global.scss file which now looks like this:

	.bg-primary * {
		@apply text-primary-content;
	}
	.bg-secondary * {
		@apply text-secondary-content;
	}

which still gives me the option to override the content modifier if I need to. Thanks again for this library. It really is fun to work with....