Improve per-component theme documentation

[rluders]

Is your feature request related to a problem? Please describe. Currently, the theme object and its usage are not fully documented for each component in the Flowbite-React library. This lack of documentation makes it challenging for users to customize components using the theme object directly or via the theme={} property. Consequently, users may face difficulties in understanding the available customization options and effectively utilizing the theme object.

Describe the solution you'd like I would like to have comprehensive documentation for the theme object of each component in the Flowbite-React library. This documentation should provide clear and detailed information on how to customize components using the theme object and explain the available properties and their corresponding types.

Describe alternatives you've considered Currently, users rely on trial and error or inspecting the source code to understand the structure and available properties of the theme object. Having dedicated documentation for each component's theme object would provide a more intuitive and efficient way for users to customize the components.

Additional context Add any other context or screenshots about the feature request here.

By documenting the theme object for each component, we can achieve the following benefits:

1. Improved Usability: Users will have a clear understanding of how to customize components using the theme object, enabling them to tailor the appearance and behavior of components to their specific needs.

2. Reduced Learning Curve: Well-documented theme objects will provide users with a comprehensive reference, reducing the time and effort required to explore and experiment with customization options.

3. Consistent Customization: By documenting the available properties and their types, we can ensure consistent and reliable customization across components, avoiding potential errors or inconsistencies in customization approaches.

4. Enhanced Developer Experience: Clear documentation on the theme object will benefit developers who are contributing to or extending the Flowbite-React library by providing a reference for understanding and modifying the theme object structure.

In summary, creating documentation for the theme object of each component in the Flowbite-React library will improve the usability, learning curve, and developer experience for users. It will empower them to effectively customize components and leverage the full potential of the library's theming capabilities.

[tulup-conner]

The starting point with #815 is just dumping all of the keys and values of each theme in. This is about the same as browsing the vanilla Flowbite components, which have giant classNames, but we do need to do some work to make the relationship of the names we have made up for each theme's key more immediately clear.

My imagination in a perfect world is an overlay on each of the component previews, where you hover over each part of the component, and see a tooltip with the corresponding theme key and the active Tailwind CSS classes associated with it. Or maybe you click one of the existing lines in the theme docs where they are currently - at the end of the page - and it visually highlights the part of each component preview that applies to.

Maybe a toggle that you can click on each component preview which adds a theme={} attribute to each component/sub-component with the full theme in place? That might be a really easy solution that also doubles as a way to demonstrate the proper way to override.

[rluders]

@tulup-conner maybe we can do something similar to what Adobe Spectrum does. Check the "component anatomy": https://spectrum.adobe.com/page/action-bar/#Anatomy

[tulup-conner]

Yeah, that basically is exactly what I'm thinking. I also personally like how this just presents everything all at once, although I'm not sure whether we can do that, since some of the themes are kinda complicated.

[rluders]

True, our components are very complex. The good part is that we created some kind of basic structure, right? If we take the Navbar as an example:

https://github.com/themesberg/flowbite-react/blob/main/src/components/Navbar/theme.ts

What we do have is a root component styling, which has its base and its config/state. Then we have the other inner components such: brand, collapse, link, and toggle all follow the same structure base + config/state.

Maybe what we want is a way to indicate these "big pieces" inside of a component and then for each create a separate visual/or textual guide to customization, so people can visualize where everything plays its role in styling.

[theogravity]

I'm confused on what to do with these theme definitions. For example I'm looking at the Sidebar component:

https://flowbite-react.com/docs/components/sidebar

Which has a theme block. It's so large that I'm thinking that this is the theme to use at the app level. So if I try assigning it a type CustomFlowbiteTheme, it says that the root property isn't part of it.

The guide on themes is really lacking. It just feels strange to apply this really large theme block to just the sidebar.