Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/LanceMoe/openai-translator --skill daisyui-colorsEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Basado en la clasificación ocupacional SOC
Mostrando 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] *));