Colors

daisyUI is fully themeable and colorable, So instead of using constant color utility classes like:

• bg-green-500
• bg-orange-600
• bg-blue-700
• etc.

It's suggested to use semantic color utility classes like:

• bg-primary
• bg-secondary
• bg-accent
• etc.

Each color name contains CSS variables and each daisyUI theme applies color values to the utility classes when it is applied.

Benefits

Semantic color names make more sense because when we design interfaces, we don't just use any random color. We define a specific color palette with names like primary, secondary, etc. and we only use those specific colors in our interfaces. Also, using semantic color names makes theming easier. You wouldn't have to define dark-mode colors for every single element and you wouldn't be limited to only light/dark themes. you can have multiple themes available and each theme is just a few lines of CSS variables.

<button class="btn btn-primary">Button</button>

<input type="checkbox" class="checkbox checkbox-secondary" />

bg-{COLOR_NAME}
to-{COLOR_NAME}
via-{COLOR_NAME}
from-{COLOR_NAME}
text-{COLOR_NAME}
ring-{COLOR_NAME}
fill-{COLOR_NAME}
caret-{COLOR_NAME}
stroke-{COLOR_NAME}
border-{COLOR_NAME}
divide-{COLOR_NAME}
accent-{COLOR_NAME}
shadow-{COLOR_NAME}
outline-{COLOR_NAME}
decoration-{COLOR_NAME}
placeholder-{COLOR_NAME}
ring-offset-{COLOR_NAME}