Colors

How to use daisyUI colors?

Introduction

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

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

Benefits

Example of theming a div with hardcoded color values

<div class="bg-zinc-100">
  <div class="bg-zinc-50 border-zinc-200 text-zinc-800">
    This is a hardcoded dark text on a light background,
    it needs double the amount of class names to support dark mode.
  </div>
</div>

<div class="bg-base-200">
  <div class="bg-base-100 border-base-300 text-base-content">
    This is dark text on a light background,
    which switches to light text on a dark background in dark mode.
  </div>
</div>

List of all daisyUI color names

How to use

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

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

These components automatically set the correct background color, text color, border color, etc as needed so you don’t need to set those colors manually. For example btn-primary sets primary color for background and border, and sets primary-content color for the text automatically as default. You can customize them using utility classes if you want to change the color.

So you can use bg-primary, border-secondary, etc. Read more about daisyUI color utility classes.

Color opacity and muted colors

base-content is the the text color of the page by default. It’s a dark color on light themes and it’s a light color on dark themes.

Sometimes we need a muted text. something with less contrast. The best way to do this is using Tailwind CSS color opacity modifier by adding a /50 (or any other value) to the end of color name. Like text-base-content/50

The advantage of using opacity is that it gives a constant result on all themes, for all colors.
You can use it with any opacity value, you can use it for any color. For example primary-content:

Official daisyUI
Figma Library

Available on daisyUI store

More details