القائمة
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/saadeghi/daisyui --skill daisyui-colorsيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف 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] *));