TextInput not using primary color by default in the theme (is using cyan as default)

[victorfunes]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

1. Create a TextInput component
2. Click on it to write inside

Current behavior

The ring color is cyan instead of primary

<TextInput type="text" sizing="md" id="companyname" placeholder="Nombre de la empresa" />

generates:

<input class="block w-full border disabled:cursor-not-allowed disabled:opacity-50 bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500 p-2.5 text-sm rounded-lg" type="text" id="companyname" placeholder="Nombre de la empresa">

Expected behavior

As default behaviour TextInput should use primary color:

<input class="block w-full border disabled:cursor-not-allowed disabled:opacity-50 bg-gray-50 border-gray-300 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500 p-2.5 text-sm rounded-lg" type="text" id="companyname" placeholder="Nombre de la empresa">

Context

It is very clear to see the theme definition using cyan as default in colors:

    input: {
      base: 'block w-full border disabled:cursor-not-allowed disabled:opacity-50',
      sizes: {
        sm: 'p-2 sm:text-xs',
        md: 'p-2.5 text-sm',
        lg: 'sm:text-md p-4',
      },
      colors: {
        gray: 'bg-gray-50 border-gray-300 text-gray-900 focus:border-cyan-500 focus:ring-cyan-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-cyan-500 dark:focus:ring-cyan-500',
        info: 'border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 focus:border-cyan-500 focus:ring-cyan-500 dark:border-cyan-400 dark:bg-cyan-100 dark:focus:border-cyan-500 dark:focus:ring-cyan-500',
        failure:
          'border-red-500 bg-red-50 text-red-900 placeholder-red-700 focus:border-red-500 focus:ring-red-500 dark:border-red-400 dark:bg-red-100 dark:focus:border-red-500 dark:focus:ring-red-500',
        warning:
          'border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 focus:border-yellow-500 focus:ring-yellow-500 dark:border-yellow-400 dark:bg-yellow-100 dark:focus:border-yellow-500 dark:focus:ring-yellow-500',
        success:
          'border-green-500 bg-green-50 text-green-900 placeholder-green-700 focus:border-green-500 focus:ring-green-500 dark:border-green-400 dark:bg-green-100 dark:focus:border-green-500 dark:focus:ring-green-500',
      },

[rluders]

@victorfunes could you please add a screenshot or a video?

[victorfunes]

@rluders I have updated my first post. I hope this will be enough.

[rluders]

I'm not sure if it is actually a bug, but we need to solve our colors. Mostly the primary to all the components, having cyan or blue as primary isn't acceptable.

[SutuSebastian]

Fixed by #1498 in flowbite-react@0.11.0 release.

Please see Docs - Colors - Customizing Colors.