daisyUI colors

How to use daisyUI semantic colors and theme-aware color variables in Tailwind CSS.

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="border-zinc-200 bg-zinc-50 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.

Opacity values

You can also use opacity values with color names.

<div class="bg-primary/50">Primary background with 50% opacity</div>

• If you're using daisyUI as a Tailwind CSS plugin, the number can be any value between 0 and 100.

• If you're using the daisyUI CDN file, only opacity values of 10, 20, 30, 40, 50, 60, 70, 80, 90 are available.

Color opacity and muted colors

base-content is 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: