skills.rest
Ocyss
OcyssCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

daisyui-colors

Enforces semantic color usage and theme configuration rules for daisyUI 5.

Updated Sep 13, 2026
Search Tags:#theming#tailwind css#dark mode#css variables#daisyui#semantic colors#color rules
One-click install
npx skills add https://github.com/Ocyss/srs-auth --skill daisyui-colors-ocyss
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui-colors
Source: https://github.com/Ocyss/srs-auth/tree/main/.agents/skills/daisyui/colors
Command: npx skills add https://github.com/Ocyss/srs-auth --skill daisyui-colors-ocyss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents inconsistent, theme-breaking color choices in daisyUI 5 projects by enforcing semantic color names instead of hardcoded Tailwind palette colors that break across themes. ## Core Features & Use Cases - Semantic Color Reference: Lists all daisyUI color names (primary, secondary, accent, base, info, success, warning, error) and their content counterparts. - Color Usage Rules: Defines when to use daisyUI colors versus raw Tailwind colors, contrast requirements for *-content colors, and single-primary-element guidance. - Theme Configuration: Covers enabling built-in themes, nesting themes with data-theme attributes, creating custom themes with CSS variables, and overriding existing themes. - Use Case: When building a page with daisyUI, consult this Skill to pick bg-base-100 with base-content text instead of text-gray-800, ensuring readability in both light and dark themes. ## Quick Start Apply the daisyUI color rules to style this page so all colors adapt correctly across light and dark themes.

Frequently Asked Questions about daisyui-colors

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use daisyUI color names in Tailwind CSS classes?▼

daisyUI color names work like any Tailwind color in utility classes, such as bg-primary or text-base-content. They reference CSS variables, so the actual color changes automatically based on the active theme.

Should I use Tailwind colors like red-500 or daisyUI colors?▼

Prefer daisyUI semantic colors like text-error so colors adapt per theme. Tailwind palette colors stay fixed across themes, which can cause unreadable contrast, such as text-gray-800 on a dark bg-base-100.

How do I create a custom daisyUI 5 theme?▼

Define a @plugin "daisyui/theme" block in your CSS with a name, default flag, and all required CSS variables like --color-primary and --color-base-100. Colors can be OKLCH, hex, or other formats.

Does daisyUI require the dark: variant for dark mode?▼

No, daisyUI color names do not need the dark: variant because they are variable-based and change with the data-theme attribute. You can optionally define a custom variant to make Tailwind's dark: follow specific daisyUI themes.

When is it acceptable to use fixed Tailwind colors in daisyUI?▼

Fixed Tailwind colors are acceptable when content must be theme-independent, such as an SVG icon or chart that must keep a specific color regardless of brand or theme colors.

Related Skills

Explore More Design & Creative Skills→
rmethodmrmethodm

daisyui-install

Guides installation of daisyUI 5 with Tailwind CSS 4 across frameworks and CDN setups.

Community
Basic
blueprintuiblueprintui
335

testing-visual

Automate visual regression testing for UI components across themes and states.

Official
Intermediate
wenermewenerme
7

daisyui-v5

Provide semantic, theme-aware daisyUI v5 class names for Tailwind CSS v4 UIs.

Community
Intermediate
rmethodmrmethodm

daisyui-colors

Applies daisyUI 5 semantic color names and theme configuration rules to Tailwind CSS projects.

Community
Basic