用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/LanceMoe/openai-translator --skill daisyui-colors命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | daisyui-colors |
| description | MANDATORY color usage rules for daisyUI 5 |
primary: Primary brand color, The main color of your brandprimary-content: Foreground content color to use on primary colorsecondary: Secondary brand color, The optional, secondary color of your brandsecondary-content: Foreground content color to use on secondary coloraccent: Accent brand color, The optional, accent color of your brandaccent-content: Foreground content color to use on accent colorneutral: Neutral dark color, For not-saturated parts of UIneutral-content: Foreground content color to use on neutral colorbase-100: Base surface color of the page, used for blank backgroundsbase-200: A darker base shade, used to create elevationbase-300: An even darker base shade, used to create more elevationbase-content: Foreground content color to use on base colorinfo: Info color, For informative/helpful messagesinfo-content: Foreground content color to use on info colorsuccess: Success color, For success/safe messagessuccess-content: Foreground content color to use on success colorwarning: Warning color, For warning/caution messageswarning-content: Foreground content color to use on warning colorerror: Error color, For error/danger/destructive messageserror-content: Foreground content color to use on error colorbg-primary will use the primary color for the backgrounddark: for daisyUI color namesred-500) is used, it will be the same red color on all themesprimary) is used, it will change color based on the themetext-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 colorsbase-* 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.text-red-500) is allowed instead of using a daisyUI color name (for example text-error): when a specific content must be indepecent 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.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;
}
themes: all; to enable every built-in theme.themes: false; to disable all built-in themes, usually before defining only custom themes.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>
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% );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ( );
: ;
: ;
: ;
: ;
: ;
: ;
: ;
: ;
}
People can use https://daisyui.com/theme-generator/ visual tool to create their own 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] *));