如何在Flowbite React应用中全局修改primary（主色）与secondary（次色）

当然可以全局修改啦！我自己在项目里也折腾过这个，Flowbite React基于Tailwind CSS，所以改起来很灵活，主要有两种常用方案，我给你一步步说清楚：

方法一：通过Tailwind CSS配置文件全局重写颜色 #

这是最常用也是最便捷的方式，直接在Tailwind的配置里覆盖默认的颜色系统，所有Flowbite组件会自动继承这些颜色：

1. 找到项目根目录下的tailwind.config.js文件（如果没有就新建一个）
2. 在配置中添加theme.extend.colors，重写primary和secondary的全明度色值，同时确保Flowbite插件正确引入：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    // 必须引入Flowbite React的内容文件，否则样式可能不生效
    "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#2563eb', // 替换成你想要的主色核心值
          600: '#1d4ed8', // 主色加深的色调，用于hover等状态
          700: '#1e40af',
          800: '#1e3a8a',
          900: '#172554',
        },
        secondary: {
          50: '#f8fafc',
          100: '#f1f5f9',
          200: '#e2e8f0',
          300: '#cbd5e1',
          400: '#94a3b8',
          500: '#64748b', // 替换成你的次色核心值
          600: '#475569',
          700: '#334155',
          800: '#1e293b',
          900: '#0f172a',
        },
      },
    },
  },
  plugins: [
    require('flowbite/plugin') // 引入Flowbite插件是关键
  ],
}

3. 保存配置后，重启你的开发服务器，Tailwind会重新生成样式，所有Flowbite组件（比如按钮、卡片、表单）都会自动使用你定义的新颜色。

方法二：自定义Flowbite组件主题（细粒度控制） #

如果你需要更精准地控制单个组件的颜色状态（比如按钮的hover、active、disabled样式），可以创建自定义的Flowbite配置文件：

1. 在项目根目录新建flowbite.config.js，在里面覆盖组件的主题配置：

module.exports = {
  theme: {
    button: {
      primary: {
        color: 'white',
        backgroundColor: '#2563eb',
        hover: {
          backgroundColor: '#1d4ed8',
        },
        active: {
          backgroundColor: '#1e40af',
        },
        disabled: {
          backgroundColor: '#93c5fd',
        }
      },
      secondary: {
        color: 'white',
        backgroundColor: '#64748b',
        hover: {
          backgroundColor: '#475569',
        }
      }
    },
    // 还可以继续配置其他组件，比如card、dropdown等
  }
}

2. 在tailwind.config.js中引入这个自定义配置：

plugins: [
  require('flowbite/plugin')({
    config: require('./flowbite.config.js')
  })
]

3. 同样重启开发服务器，就能看到组件的样式按照你的自定义配置生效了。

小提示 #

• 建议保持颜色的明度层级（50到900）统一，这样组件的状态变化（比如hover变深）会更自然；
• 可以用Tailwind的颜色生成工具来获取一套协调的色值，或者直接使用你项目的品牌色。

内容来源于stack exchange