Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/saadeghi/daisyui --skill daisyui-colors명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Investigate reported or suspected bugs in this daisyUI monorepo, including proactive bug searches in packages/daisyui and packages/docs. Use when Codex must reproduce a defect, prove product impact, identify its root cause and isolation boundary, evaluate non-code solution options, or prepare a decision-ready bug-fix plan in tmp/bugs/. This skill performs read-only source analysis and verification; it never implements a fix, edits product source or tests, changes dependencies, or commits.
Review one or all open pull requests in saadeghi/daisyui with read-only GitHub data and isolated base-versus-PR checks. Use when Codex must verify a PR, find concrete regressions, decide whether it is safe to merge, and write a concise report under tmp/pr/.
Configuration options for daisyUI 5
SOC 직업 분류 기준
SKILL.md 표시 중
| name | daisyui-colors |
| description | Color rules that you must use with daisyUI 5 |
primary: The main brand color.primary-content: Foreground content color for use on primary.secondary: An optional secondary brand color.secondary-content: Foreground content color for use on secondary.accent: An optional accent brand color.accent-content: Foreground content color for use on accent.neutral: A dark neutral color for UI areas that do not use saturated colors.neutral-content: Foreground content color for use on neutral.base-100: The page base-surface color for blank backgrounds.base-200: A darker base shade that gives elevation.base-300: A still darker base shade that gives more elevation.base-content: Foreground content color for use on a base color.info: Color for information and help messages.info-content: Foreground content color for use on info.success: Color for success and safe-state messages.success-content: Foreground content color for use on success.warning: Color for warning and caution messages.warning-content: Foreground content color for use on warning.error: Color for error, danger, and destructive-action messages.error-content: Foreground content color for use on error.bg-primary uses the primary color for the background.dark: with daisyUI color names.red-500, its color stays the same in all themes.primary, its color changes with the theme.text-gray-800 on bg-base-100 becomes unreadable in a dark theme because bg-base-100 is dark.*-content colors must have clear contrast with their related colors.base-* colors for most of the page. Use the default variant for all elements. Use primary only for the most important element on the page. Use it only once.text-red-500 instead of text-error. For an SVG icon or chart, a fixed color can be necessary.The default configuration enables light and dark. In the daisyUI plugin, select specified themes, all themes, or no built-in themes:
@plugin "daisyui" {
themes: light --default, dark --prefersdark, cupcake;
}
themes: all; to enable all built-in themes.themes: false; to disable all built-in themes. Usually, do this before you define only custom themes.data-theme="THEME_NAME" to <html> or a nested element. You can nest themes with no depth limit.<html data-theme="dark">
<section data-theme="light">
<div data-theme="retro">Nested theme</div>
</section>
</html>
A CSS file that contains Tailwind CSS, daisyUI, and a custom daisyUI theme has this structure:
@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% );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
}
Optional: Use the visual tool at https://daisyui.com/theme-generator/ to make a custom theme.
Use the built-in theme name. Change only the necessary values. daisyUI inherits the other values:
@plugin "daisyui/theme" {
name: "light";
default: true;
--color-primary: blue;
--color-secondary: teal;
}
For a custom CDN theme, define the same variables in a selector. The selector must match the selected data-theme and 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 the Tailwind dark: variant follow one or more daisyUI themes, define a custom variant:
@custom-variant dark (&:where([data-theme=night], [data-theme=night] *));