Theme overwrite per component

[rluders]

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 (Feat/theming #450)
• AlertTheme (Feat/theming #450)
• AvatarTheme (Feat/theming #450)
• AvatarGroupTheme (Feat/theming #450)
• BadgeTheme (Feat/theming #450)
• BreadcrumbTheme (Feat/theming #450)
• ButtonTheme (Feat/theming #450)
• ButtonGroupTheme (Feat/theming #450)
• CardTheme (Feat/theming #450)
• CarouselTheme (Feat/theming #450)
• DarkThemeToggleTheme (Feat/theming #450)
• DropdownTheme (Feat/theming #450)
• FloatingTheme (Feat/theming #450)
• FooterTheme (Feat/theming #450)
• HelperTextTheme (Feat/theming #450)
• ListGroupTheme (Feat/theming #450)
• ModalTheme (Feat/theming #450)
• NavbarTheme (Feat/theming #450)
• PaginationTheme (Feat/theming #450)
• ProgressTheme (Feat/theming #450)
• RatingTheme (Feat/theming #450)
• SidebarTheme (Feat/theming #450)
• SpinnerTheme (Feat/theming #450)
• TabTheme (Feat/theming #450)
• ToastTheme (Feat/theming #450)
• TooltipTheme (Feat/theming #450)
• Theme Interface: TableTheme #452
• Theme Interface: ToastTheme #453
• Theme Interface: TimelineTheme #454
• Theme Interface: CheckboxTheme #455
• Theme Interface: FileInputTheme #456
• Theme Interface: LabelTheme #457
• Theme Interface: RadioTheme #458
• Theme Interface: SelectTheme #459
• Theme Interface: TextInputTheme #460
• Theme Interface: TextAreaTheme #461
• Theme Interface: ToggleSwitchTheme #462
• Allow customize components with theme={} props #465

[yurisldk]

@rluders I've tested the case where we may add theme prop to each component and than deepcopy the useTheme() result and deepMerge with theme prop object.

export interface AccordionProps extends PropsWithChildren<ComponentProps<'div'>> {
  alwaysOpen?: boolean;
  arrowIcon?: FC<ComponentProps<'svg'>>;
  children: ReactElement<AccordionPanelProps> | ReactElement<AccordionPanelProps>[];
  flush?: boolean;
  theme?: DeepPartial<FlowbiteTheme['accordion']>;
}

const AccordionComponent: FC<AccordionProps> = ({
  alwaysOpen = false,
  arrowIcon = HiChevronDown,
  children,
  flush = false,
  className,
  theme: customTheme = {},
  ...props
}): JSX.Element => {
  const [isOpen, setOpen] = useState(0);

  const systemTheme: FlowbiteTheme['accordion'] = JSON.parse(JSON.stringify(useTheme().theme.accordion));
  const theme = mergeDeep(systemTheme, customTheme);

  // ...

And we may use component like this

  <div className="space-y-8">
    <Accordion
      theme={{
        base: 'divide-y-4 divide-rose-200 border-rose-200 dark:divide-rose-700 dark:border-rose-700',
      }}
    >
        // ...
    </Accordion>

    <Accordion>
        // ...
    </Accordion>
  </div>

What do you think about that?

[rluders]

@sldk-yuri In general it looks good. I do have two questions:

• Do we really have to JSON.stringfy and JSON.parse the component theme object?
• Do we need to access FlowbiteTheme['accordion'] like this? Is it to get the object type?

[yurisldk]

1. we have to deepcopy the object otherwise we will work with the same object src/lib/theme/default.ts and mutate it, all updates will be global. JSON.parse(JSON.stringfy()) is naive solution, the main thing is clone object deep so we may change/update code (lodash`s cloneDeep()?).
2. I've use FlowbiteTheme['accordion'] to add correct type for the systemTheme becouse JSON methods return any. theme?: DeepPartial<FlowbiteTheme['accordion']>; to add correct type for theme prop so we can choose only accordion related theme keys.

we probably may divide Flowbite Theme interface

flowbite-react/src/lib/components/Flowbite/FlowbiteTheme.ts

Lines 33 to 53 in 104d6fb

	export interface FlowbiteTheme extends Record<string, unknown> {
	accordion: {
	base: string;
	content: {
	base: string;
	};
	flush: FlowbiteBoolean;
	title: {
	arrow: {
	base: string;
	open: {
	off: string;
	on: string;
	};
	};
	base: string;
	flush: FlowbiteBoolean;
	heading: string;
	open: FlowbiteBoolean;
	};
	};

to components pieces to avoid FlowbiteTheme['accordion'] and make code more readable. For example:

export interface AccordionTheme {
  base: string;
  content: {
    base: string;
  };
  flush: FlowbiteBoolean;
  title: {
    arrow: {
      base: string;
      open: {
        off: string;
        on: string;
      };
    };
    base: string;
    flush: FlowbiteBoolean;
    heading: string;
    open: FlowbiteBoolean;
  };
}

export interface FlowbiteTheme extends Record<string, unknown> {
  accordion: AccordionTheme;
  // ...

export interface AccordionProps extends PropsWithChildren<ComponentProps<'div'>> {
  alwaysOpen?: boolean;
  arrowIcon?: FC<ComponentProps<'svg'>>;
  children: ReactElement<AccordionPanelProps> | ReactElement<AccordionPanelProps>[];
  flush?: boolean;
  theme?: DeepPartial<AccordionTheme>
}

I also have some ideas about nester theme provider

<Flowbite theme={{
        base: 'divide-y-4 divide-rose-200 border-rose-200 dark:divide-rose-700 dark:border-rose-700',
      }}>
  <Accordion>
    // ...
  </Accordion>
</Flowbite>

[rluders]

All right! It looks good.

BTW, I liked the idea to move the themes per component, I think that this possibility to overwrite theme per component ends up making a lot of sense doing it.

So, to avoid some HUGE PRs... Maybe we want to convert this issue into an Epic, and handle all the remaining implementation in separate PR. What do you think? Basically, we will have "one issue per component".

[yurisldk]

I'm agree with you, lets start with branch for theme types decomposition because it look like refactoring

I'm going to:

1. Create a branch "refactor-theme-decomposition" and update theme types in src/lib/components/Flowbite/FlowbiteTheme.ts file.
2. Run tests, make sure that everything work correct, fix if something don't.
3. Merge the branch

I think it's a good start point. After that we may continue work on components theme implementation.

btw what is the good way to keep interfaces in this project - in the same file src/lib/components/Flowbite/FlowbiteTheme.ts or make a ton of separate files for each type?

[rluders]

OK. Sounds good.

It is OK to have the component theme definition inside the main component file. For example, Accordion.tsx should hold the AccordionTheme interface, but if you want, I'm not against having it as a separated file AccortionTheme.tsx to keep just the interfaces related to the component theming.

I guess that having a separate file could be the best approach here.

[rluders]

Also, maybe I would try to move the:

const systemTheme: FlowbiteTheme['accordion'] = JSON.parse(JSON.stringify(useTheme().theme.accordion));
const theme = mergeDeep(systemTheme, customTheme);

Into some generic helper function that could be used by all the components.

[rluders]

Maybe something like this:

const theme = useComponentTheme<FlowbiteAccordion>(customTheme);

I don't know, just "throwing some ideas...