Theme overwrite per component

Is your feature request related to a problem? Please describe.

Today we do have the [flowbite-react theme[(https://flowbite-react.com/theme) that can be used to customize the components and also direct access to component className.

The problem with this approach is that using the className you can only apply custom classes to the root element component (normally the one with theme.base), and you need to sometimes use !important tag to overwrite some existing styles. This is OK for small customizations, or if you don’t mind writing some CSS.

Note You could add to your component using className a custom class as .my-custom-class and overwrite all the component styles with CSS.

Also, the theme support is great, and it helps to keep the UI consistent, but it also leads you to not be able to create multiple component styles that can be reused. In this case, with the theme component, you can customize every single item inside the component, access its defined theme property styles, and even extend some of them. But, this style will be shared between all components, and today you can’t apply custom themes per component, which is painful.

Describe the solution you’d like

Allow the user to create custom component themes that can be individually applied and fully overwrite the main flowbite-react theme for one specific component.

Example of usage:

const AccordionCustomTheme =  {
    base: 'divide-y divide-gray-200 border-gray-200 dark:divide-gray-700 dark:border-gray-700',
    content: {
      base: 'py-5 px-5 last:rounded-b-lg dark:bg-gray-900 first:rounded-t-lg',
    },
    flush: {
      off: 'rounded-lg border',
      on: 'border-b',
    },
    title: {
      arrow: {
        base: 'h-6 w-6 shrink-0',
        open: {
          off: '',
          on: 'rotate-180',
        },
      },
      base: 'flex w-full items-center justify-between first:rounded-t-lg last:rounded-b-lg py-5 px-5 text-left font-medium text-gray-500 dark:text-gray-400',
      flush: {
        off: 'hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-800 dark:focus:ring-gray-800',
        on: '!bg-transparent dark:!bg-transparent',
      },
      heading: '',
      open: {
        off: '',
        on: 'text-gray-900 bg-gray-100 dark:bg-gray-800 dark:text-white',
      },
    },
};

// ...

return (
<Accordion theme={AccordionCustomTheme}>
  <Accordion.Panel>
    <Accordion.Title>What is Flowbite?</Accordion.Title>
      <Accordion.Content>
        <p className="mb-2 text-gray-500 dark:text-gray-400">
          Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons,
          dropdowns, modals, navbars, and more.
        </p>
        <p className="text-gray-500 dark:text-gray-400">
          Check out this guide to learn how to{' '}
          <a
            href="https://flowbite.com/docs/getting-started/introduction/"
            className="text-blue-600 hover:underline dark:text-blue-500"
          >
            get started
          </a>{' '}
          and start developing websites even faster with components on top of Tailwind CSS.
      </p>
    </Accordion.Content>
  </Accordion.Panel>
</Accordion>
)

Describe alternatives you’ve considered

None.

Additional context

None.

Related issues

• AccordionTheme (#450)
• AlertTheme (#450)
• AvatarTheme (#450)
• AvatarGroupTheme (#450)
• BadgeTheme (#450)
• BreadcrumbTheme (#450)
• ButtonTheme (#450)
• ButtonGroupTheme (#450)
• CardTheme (#450)
• CarouselTheme (#450)
• DarkThemeToggleTheme (#450)
• DropdownTheme (#450)
• FloatingTheme (#450)
• FooterTheme (#450)
• HelperTextTheme (#450)
• ListGroupTheme (#450)
• ModalTheme (#450)
• NavbarTheme (#450)
• PaginationTheme (#450)
• ProgressTheme (#450)
• RatingTheme (#450)
• SidebarTheme (#450)
• SpinnerTheme (#450)
• TabTheme (#450)
• ToastTheme (#450)
• TooltipTheme (#450)
• #452
• #453
• #454
• #455
• #456
• #457
• #458
• #459
• #460
• #461
• #462
• #465

[sldk-yuri]

@rluders yes, you’re right the next phase is add theme prop to all components. I’m agree that we may use one PR for that.

[rluders]

OK. I think that now that we have all the components with their own theme interfaces, we could move to the second phase of this task which is to implement the theme={} props to all components.

@tulup-conner @sldk-yuri right? I think that we can address it in one single PR. It should be ~4 lines per component change.