React中如何用自定义颜色修改DaisyUI 5.0.2内置明暗主题？

问题根源 #

你当前的问题出在两种配置方式冲突，以及部分颜色变量的逻辑设置错误：

• 同时在App.css用@plugin定义主题，又在tailwind.config.js中配置自定义主题，导致DaisyUI无法识别正确的优先级
• Light主题中base-100被设为深色，不符合浅色主题的背景逻辑，可能导致自定义颜色被覆盖或显示异常

修复步骤 #

1. 清理冲突配置 #

删除App.css中所有@plugin相关代码，仅保留基础Tailwind指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

2. 在tailwind.config.js中覆盖内置明暗主题 #

直接修改daisyui.themes配置，覆盖原生的light和dark主题，自动跟随系统明暗偏好，无需手动设置data-theme：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
    fontFamily: {
      sans: ["Open Sans", "sans-serif"],
    },
  },
  daisyui: {
    themes: [
      // 覆盖内置light主题
      {
        light: {
          primary: "oklch(60% 0.2 140)",
          secondary: "oklch(20% 0.01 0)",
          accent: "oklch(80% 0.2 85)",
          neutral: "oklch(100% 0 0)",
          "base-100": "oklch(98% 0.01 0)", // 修正为浅色背景
          "base-200": "oklch(95% 0.01 0)",
          "base-300": "oklch(85% 0.01 240)",
          info: "oklch(55% 0.25 260)",
          success: "oklch(70% 0.2 140)",
          warning: "oklch(80% 0.15 80)",
          error: "oklch(60% 0.3 30)",
        },
      },
      // 覆盖内置dark主题
      {
        dark: {
          primary: "oklch(60% 0.2 140)",
          secondary: "oklch(25% 0.01 0)",
          accent: "oklch(80% 0.2 85)",
          neutral: "oklch(20% 0.01 0)",
          "base-100": "oklch(10% 0.01 0)",
          "base-200": "oklch(15% 0.01 0)",
          "base-300": "oklch(20% 0.01 0)",
          info: "oklch(50% 0.25 260)",
          success: "oklch(55% 0.2 140)",
          warning: "oklch(75% 0.15 80)",
          error: "oklch(55% 0.3 30)",
        },
      },
    ],
  },
  plugins: [require("daisyui")],
};

3. 验证配置 #

• 重启React开发服务器，确保配置生效
• 切换系统明暗模式，检查组件颜色是否按自定义值渲染

关键注意事项 #

• DaisyUI 5.x优先读取tailwind.config.js中的主题配置，不要同时用CSS @plugin和配置文件定义主题
• 浅色主题的base-100应为页面背景色，需设置为浅色；深色主题对应深色背景，避免颜色逻辑混乱
• 若要手动切换主题，可通过设置data-theme="light"或data-theme="dark"实现，无需新建自定义主题

内容的提问来源于stack exchange，提问作者Халиука Б.