I’m trying to add a custom theme to my Flowbite React project, but I’m having difficulty overriding the default cyan primary color used by Flowbite React. Here’s what I have done so far:

I’ve set up my Tailwind CSS configuration with custom colors and fonts, and included Flowbite React’s content and plugin in my configuration:

const flowbite = require('flowbite-react/tailwind');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
    'node_modules/flowbite-react/lib/esm/**/*.js',
    flowbite.content(),
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#E3E6F3',
          100: '#B0B7E5',
          200: '#8D8FDF',
          300: '#6A6DD9',
          400: '#4441C4',
          500: '#080B42', // Custom base blue color
          600: '#070A3B',
          700: '#050835',
          800: '#02051F',
          900: '#00000A',
        },
        secondary: {
          50: '#f5f5f5',
          100: '#e0e0e0',
          200: '#bdbdbd',
          300: '#9e9e9e',
          400: '#808080',
          500: '#6d6d6d',
          600: '#4d4d4d',
          700: '#3c3c3c',
          800: '#2c2c2c',
          900: '#1F1F1F',
        },
      },
      fontFamily: {
        sans: [
          'Roboto',
          'Poppins',
          'Gotham',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'Segoe UI',
          'Helvetica Neue',
          'Arial',
          'Noto Sans',
          'sans-serif',
        ],
      },
    },
  },
  plugins: [require('flowbite/plugin'), flowbite.plugin()],
};

Despite this setup, Flowbite React continues to use cyan as its primary color. I found that redefining the primary color as cyan in my configuration works, but this isn’t an ideal solution:

colors: {
  cyan: {
    50: '#E3E6F3',
    100: '#B0B7E5',
    200: '#8D8FDF',
    300: '#6A6DD9',
    400: '#4441C4',
    500: '#080B42',
    600: '#070A3B',
    700: '#050835',
    800: '#02051F',
    900: '#00000A',
  },
},

I also considered defining custom theming for each component, but this approach is difficult to maintain.

I’ve gone through the documentation and GitHub discussions, but I haven’t found a satisfactory solution.

Question:
How can I properly override the primary color and apply my custom theme in Flowbite React without redefining the cyan color or manually setting themes for each component?

Any help or guidance would be appreciated!