skills.rest
eminboydak
eminboydakCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

daisyui-colors

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

Updated Sep 3, 2024
Search Tags:#theming#color palette#tailwind css#css variables#daisyui#frontend styling#custom theme
One-click install
npx skills add https://github.com/eminboydak/duckTerm --skill daisyui-colors-eminboydak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: daisyui-colors
Source: https://github.com/eminboydak/duckTerm/tree/main/.agents/skills/daisyui/colors
Command: npx skills add https://github.com/eminboydak/duckTerm --skill daisyui-colors-eminboydak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and applying colors in daisyUI 5 projects often leads to hardcoded Tailwind colors that break when themes change, poor contrast between foreground and background, and inconsistent custom theme definitions. ## Core Features & Use Cases - Semantic Color Reference: Lists all daisyUI 5 color names (primary, secondary, accent, base-*, info, success, warning, error, and their *-content pairs) with usage rules. - Theme Configuration: Shows how to enable built-in themes, apply data-theme attributes, and nest themes at any depth. - Custom Theme Generation: Provides the complete CSS variable template for building custom daisyUI themes with OKLCH colors, radius, size, border, depth, and noise settings. - Use Case: When building a Svelte or React app with Tailwind CSS v4 and daisyUI 5, use this Skill to generate a custom brand theme and ensure every component uses theme-aware semantic colors instead of fixed Tailwind palette values. ## Quick Start Apply the daisyUI color rules to style my component and generate a custom daisyUI 5 theme with my brand colors.

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 5 color names in Tailwind CSS classes?▼

Use daisyUI semantic color names exactly like Tailwind color names in utility classes, such as bg-primary or text-base-content. These names map to CSS variables, so the actual color changes automatically when the active theme changes.

How to create a custom daisyUI 5 theme with custom colors?▼

Define a custom theme inside a @plugin "daisyui/theme" block in your CSS file, setting a name and all required --color-* variables plus radius, size, border, depth, and noise values. Colors can use OKLCH, hex, or other formats, and you must include every variable from the template.

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

Prefer daisyUI semantic colors because they adapt to the active theme, while Tailwind palette colors like red-500 stay fixed across all themes. Fixed Tailwind colors are only appropriate when content must keep one color in every theme, such as certain SVG icons or charts.

Why does text become unreadable when switching daisyUI themes?▼

Unreadable text usually comes from using fixed Tailwind text colors like text-gray-800 on theme-aware backgrounds like bg-base-100, which turns dark in dark themes. Use paired semantic colors such as base-content on base-100 to maintain contrast in every theme.

Can I use the Tailwind dark: variant with daisyUI themes?▼

Do not use dark: with daisyUI color names, since daisyUI handles dark mode through themes. If you need dark: to follow a daisyUI theme, define a custom variant such as @custom-variant dark (&:where([data-theme=night], [data-theme=night] *)).

How do I enable or disable built-in daisyUI themes?▼

Configure themes inside the @plugin "daisyui" block: use themes: all to enable every built-in theme, themes: false to disable them before defining custom ones, or list specific themes with flags like light --default and dark --prefersdark. Apply a theme by setting data-theme on the html element or any nested element.

Related Skills

Explore More Software Engineering Skills→
IgorAIvanovIgorAIvanov
1

daisyui-install

Guides installation of daisyUI 5 with Tailwind CSS 4 in CSS files.

Community
Basic
wenermewenerme
7

daisyui-v5

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

Community
Intermediate
organvm-i-theoriaorganvm-i-theoria

theme-factory

Apply curated color palettes and font pairings to slides, docs, and HTML artifacts.

Official
Intermediate
boludo00boludo00
80

tailwind

Apply Tailwind CSS utility classes with custom themes and dark mode.

Community
Intermediate