What are daisyUI color names?

DaisyUI color names are semantic names like `primary`, `secondary`, and `accent`, designed to enhance branding and UI consistency.

How do I apply daisyUI colors in my project?

You can apply daisyUI colors using utility classes, such as `bg-primary` for background colors, which automatically adapt to the selected theme.

Can I use Tailwind CSS color names with daisyUI?

While you can use Tailwind CSS color names, it's recommended to use daisyUI names for better theme adaptability and to avoid readability issues.

What should I do if I want a static color?

In rare cases, you can use Tailwind CSS color names for specific elements that need to remain consistent regardless of the theme.

Are there any accessibility considerations?

Yes, ensure that `*-content` colors have good contrast with their associated colors to maintain readability across themes.

daisyUI Colors

Name: daisyUI Colors
Availability: InStock
Author: saadeghi

Free

Define and manage colors in daisyUI effortlessly.

by saadeghi42k stars on saadeghi/daisyui

1 views

Updated Aug 9, 2026

Get this skill

Free · Opens the source repo

What daisyUI Colors does

The daisyUI Colors skill provides a comprehensive guide to using color names and rules within the daisyUI framework, which is built on top of Tailwind CSS. It introduces a set of semantic color names that enhance the design process by allowing developers to maintain visual consistency across themes. Each color name, such as primary, secondary, and accent, serves a specific purpose in branding and UI design, making it easier to apply colors consistently throughout an application.

With this skill, users can leverage the color names in utility classes, ensuring that colors adapt based on the selected theme. This is particularly useful for developers who want to create responsive designs that automatically adjust their color schemes without manually changing each instance. The skill also emphasizes best practices for color usage, such as ensuring that content colors provide sufficient contrast against their backgrounds, which is crucial for accessibility.

The skill is ideal for developers and designers working with daisyUI who need a clear set of guidelines for color application. It streamlines the process of theming and color management, making it easier to create visually appealing and user-friendly interfaces. By adhering to the provided color rules, users can avoid common pitfalls, such as using static Tailwind CSS colors that do not adapt to theme changes, which can lead to poor readability and user experience.

Overall, the daisyUI Colors skill is a valuable resource for anyone looking to implement a robust and flexible color system in their projects, ensuring that their designs are not only aesthetically pleasing but also functional and accessible.

When to use it

Use this skill when developing applications with daisyUI to ensure proper color management and theming.

When not to use it

This skill is not necessary for projects that do not use daisyUI or Tailwind CSS, or for those not concerned with semantic color naming.

What you can build with it

Creating a Themed UI

Utilize daisyUI color names to build a responsive UI that adapts to light and dark themes seamlessly.

Ensuring Accessibility

Follow the color rules to guarantee that all text and background combinations are readable across different themes.

Brand Consistency

Apply primary, secondary, and accent colors consistently throughout your application to reinforce brand identity.

How to install daisyUI Colors

View source

1. Install with the skills CLI

npx skills add saadeghi/daisyui/colors --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by saadeghi

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: Base surface color of the page, used for blank backgrounds
base-200: A darker base shade, used to create elevation
base-300: An even darker base shade, used to create more elevation
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

daisyUI adds semantic color names to Tailwind CSS colors
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
daisyUI color names include variables as value so they can change based on the theme
There's no need to use dark: for daisyUI color names
Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme
If a Tailwind CSS color name (like red-500) is used, it will be the same red color on all themes
If a daisyUI color name (like primary) is used, it will change color based on the theme
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
*-content colors should have a good contrast compared to their associated colors
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.
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 independent 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.

Enabling and applying themes

The default configuration enables light and dark. Choose specific themes, every theme, or no built-in themes in the daisyUI plugin:

@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}

Use themes: all; to enable every built-in theme.
Use themes: false; to disable all built-in themes, usually before defining only custom themes.
Add data-theme="THEME_NAME" to <html> or any nested element. Themes can be nested without a fixed depth limit.

<html data-theme="dark">
  <section data-theme="light">
    <div data-theme="retro">Nested theme</div>
  </section>
</html>

daisyUI custom theme with custom colors

A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this:

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* set as default */
  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
  color-scheme: light; /* color of browser-provided UI */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
  --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
  --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
  /* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */

  --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. If so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */
  --size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. If so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */

  --border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. If so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */

  --depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */
  --noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */
}

Rules

All CSS variables above are required
Colors can be OKLCH or hex or other formats
If you're generating a custom theme, do not include the comments from the example above. Just provide the code.

People can use https://daisyui.com/theme-generator/ visual tool to create their own theme.

Customize an existing theme

Use the built-in theme's name and override only the values that need to change. Other values are inherited:

@plugin "daisyui/theme" {
  name: "light";
  default: true;
  --color-primary: blue;
  --color-secondary: teal;
}

For a custom CDN theme, define the same variables under a selector that matches the chosen data-theme and checked theme controller:

:root:has(input.theme-controller[value=mytheme]:checked),
[data-theme="mytheme"] {
  color-scheme: light;
  --color-primary: oklch(55% 0.3 240);
  /* define the remaining custom-theme variables */
}

To make Tailwind's dark: variant follow one or more daisyUI themes, define a custom variant:

@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));

Frequently asked questions about daisyUI Colors

Similar skills

Playwright Component Testing

Test React and Vue components in isolation with Playwright.

Fluent UI Blazor

Integrate Fluent UI components in Blazor applications effortlessly.

Build MCP App

Create interactive UI widgets for MCP servers.

Web Design Reviewer

Identify and fix design issues in websites efficiently.

Markstream Install

Seamlessly integrate Markstream for Markdown rendering.

GSAP & Framer Scroll Animation

Create advanced scroll animations effortlessly.