daisyui-colors

daisyUI 5 colors

daisyUI color names

• primary: Primary brand color, The main color of your brand
• primary-content: Foreground content color to use on primary color
• secondary: Secondary brand color, The optional, secondary color of your brand
• secondary-content: Foreground content color to use on secondary color
• accent: Accent brand color, The optional, accent color of your brand
• accent-content: Foreground content color to use on accent color
• neutral: Neutral dark color, For not-saturated parts of UI
• neutral-content: Foreground content color to use on neutral color
• base-100:-100 Base surface color of page, used for blank backgrounds
• base-200:-200 Base color, darker shade, to create elevations
• base-300:-300 Base color, even more darker shade, to create elevations
• base-content: Foreground content color to use on base color
• info: Info color, For informative/helpful messages
• info-content: Foreground content color to use on info color
• success: Success color, For success/safe messages
• success-content: Foreground content color to use on success color
• warning: Warning color, For warning/caution messages
• warning-content: Foreground content color to use on warning color
• error: Error color, For error/danger/destructive messages
• error-content: Foreground content color to use on error color

daisyUI color rules

1. daisyUI adds semantic color names to Tailwind CSS colors
2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. For example, bg-primary will use the primary color for the background
3. daisyUI color names include variables as value so they can change based on the theme
4. There's no need to use dark: for daisyUI color names
5. Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme
6. If a Tailwind CSS color name (like red-500) is used, it will be the same red color on all themes
7. If a daisyUI color name (like primary) is used, it will change color based on the theme
8. Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color text-gray-800 on bg-base-100 would be unreadable on a dark theme - because on dark theme, bg-base-100 is a dark color
9. *-content colors should have a good contrast compared to their associated colors
10. Use base-* colors for majority of the page. Use the default variant for all elements. Use primary color once only, for the most important element on the page.
11. Rare use case when using Tailwind CSS color names (for example text-red-500) is allowed instead of using a daisyUI color name (for example text-error): when a specific content must be indepecent from the theme. For example if a svg icon or a chart graph must use a specific color, no matter what are our brand colors or theme colors.