如何在DaisyUI中定义可适配主题的自定义颜色？

DaisyUI不会自动识别你直接定义的--color-red CSS变量来生成text-red这类工具类，必须在主题的colors配置项中注册自定义颜色，才能让系统生成对应的颜色工具类。

正确配置方式 #

方式1：通过Tailwind配置文件定义主题 #

如果你的项目使用tailwind.config.js管理DaisyUI主题，直接在daisyui.themes里的主题对象中添加red颜色：

module.exports = {
  plugins: [require("daisyui")],
  daisyui: {
    themes: [
      {
        mytheme: {
          "color-scheme": "light",
          // 保留你原有的其他主题颜色配置
          "red": "#ff3434",
        },
        mytheme-dark: {
          "color-scheme": "dark",
          // 深色主题下降低饱和度的红色
          "red": "#ff6666",
          // 同步其他主题颜色
        }
      }
    ]
  }
}

方式2：通过@plugin语法定义主题 #

如果你坚持使用@plugin语法，需要在主题配置中加入colors对象并注册red：

@plugin "./daisy/daisyui-theme.js" {
  name: "mytheme";
  default: true;
  prefersdark: false;
  color-scheme: light;

  colors: {
    red: "#ff3434",
    // 其他主题颜色...
  }
}

@plugin "./daisy/daisyui-theme.js" {
  name: "mytheme-dark";
  default: false;
  prefersdark: true;
  color-scheme: dark;

  colors: {
    red: "#ff6666",
    // 其他主题颜色...
  }
}

原理说明 #

DaisyUI的text-{color}、bg-{color}等工具类，是基于主题配置中colors对象的键名自动生成的。仅定义CSS变量不会触发工具类的生成，必须将颜色名称注册到colors对象中，系统才会为其生成对应的工具类，同时自动创建对应的--color-red CSS变量供你在自定义样式中使用。

内容的提问来源于stack exchange，提问作者JohnT