SuperAPI AI 工具集

daisyui-colors

前端与建站

查看项目

更新于 10-16 06:16

技能介绍

用途:为 daisyUI 5 项目提供统一的语义化颜色命名与主题切换规则,让颜色随主题变化而非硬编码。

主要能力:颜色名包括 primary、primary-content、secondary、secondary-content、accent、accent-content、neutral、neutral-content、base-100、base-200、base-300、base-content、info、info-content、success、success-content、warning、warning-content、error、error-content。颜色值均为变量,可随主题改变,在工具类中像 Tailwind 颜色名一样使用,例如 bg-primary。

使用规则:不要与 dark: 一起使用 daisyUI 颜色名;尽量只用 daisyUI 颜色名;避免用 Tailwind 颜色名做文本色,例如 text-gray-800 配 bg-base-100 在暗色主题下不可读;-content 必须与其对应颜色保持清晰对比;页面大部分用 base-,重要元素才用 primary 且只用一次;仅当内容需在所有主题保持同色时(如 SVG 图标或图表)才用固定 Tailwind 颜色。

启用主题:插件中可用 themes: light --default, dark --prefersdark, cupcake;,themes: all; 启用全部内置主题,themes: false; 禁用全部内置主题。在 html 或嵌套元素上添加 data-theme="THEME_NAME",可无限层级嵌套。

自定义主题:通过 @plugin "daisyui/theme" 定义,需包含示例中全部 CSS 变量,颜色可用 OKLCH、hex 等格式;不要保留示例中的注释。修改内置主题时只写需要变更的值,其余自动继承。CDN 自定义主题需在匹配 data-theme 与主题控制器的选择器中定义变量。还可通过 @custom-variant 让 Tailwind 的 dark: 变体跟随指定 daisyUI 主题。

适用场景:使用 daisyUI 5 与 Tailwind CSS 的前端项目配色与多主题支持。

限制:资料未提供安装命令、版本兼容范围与浏览器支持信息。