DaisyUI 5 Themes: A Tailwind CSS Color Token Example

DaisyUI themes use semantic color variables such as --color-primary, --color-base-100, and matching content colors. Components that use semantic utilities can then respond to the active theme instead of hard-coded palette classes.

A small DaisyUI theme definition

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "studio";
  default: true;
  color-scheme: light;

  --color-base-100: oklch(98% 0.01 280);
  --color-base-content: oklch(22% 0.02 280);
  --color-primary: oklch(55% 0.2 285);
  --color-primary-content: oklch(98% 0.01 280);
  --color-secondary: oklch(62% 0.12 190);
  --color-secondary-content: oklch(98% 0.01 190);
}

Assign colors by role

Use primary for the main brand action, base-100 for a default surface, and the matching *-content variables for content placed on colored backgrounds. DaisyUI does not choose a suitable content color for you in version 5, so check the pairs you define.

Test it in your components

Use semantic classes such as bg-primary, text-primary-content, and bg-base-100. Preview buttons, alerts, cards, and form controls; a token set can look balanced as a list and still create poor component contrast.

See the current DaisyUI theme documentation and DaisyUI 5 migration notes. You can draft a set of colors with the UI palette generator.