About the theme support

[rluders]

Updated February 20, 2023: Every component in flowbite-react can be fully customized now, see https://flowbite-react.com/theme

Hello,

We started to introduce on #61 the theme support to the library. It is still in the experimental phase, and we should start to add theme support to the components in the next steps.

Keep in mind that it doesn't replace the tailwind.config.js anyhow, it is just a way to customize the Flowbite components. If you want to change something related to the TailwindCSS, you gonna need to use its own configuration file.

My main concerns while developing it are related to the fact that I'm not sure how you folks expect to use these theme configurations. Mostly I would not like to allow changes that could somehow break the design system bases, but at the same time, I do understand that it is already something possible by changing the default tailwind configurations.

What do you folks think? How extensive the theme customization should be? What are you folks looking for? Do you have any examples in mind where you want to use the theme support?

[meditto]

Hello @rluders
For theme customization, I think it's better to use named colors, For example, using primary instead of blue.

[meditto]

That's a good improvement. My idea is to replace the blue color with primary in the class name because it's apparently the primary color for Flowbit.

[tulup-conner]

Yea, I have just been calling that "info" so far - I completely agree with you though, thoughts @rluders

In most use cases people end up having a primary color anyway, so I think that makes a lot of sense.

[meditto]

Here is an example from the TextInput component. That's what should be renamed, IMO. So that the user can change it easily

[tulup-conner]

Well, to be clear, you can add any colors you like to any components, or will be able to once the theming is complete. So you will be able to add a primary, secondary, whatever you can think of that isn't in the base color set. But I agree that calling the Flowbite blue "primary" makes sense as well.

[rluders]

I think that it is OK to have it with both names: primary and info. As @tulup-conner said, we are designing it to support as many colors as possible, and give the possibility to name it as you like. It is the same for sizes and other things as well.

The idea of the Theme support is to allow users to have "one place to customize their design system" and avoid using the className property to add different styles to the components, which could lead to a broken design system.

And of course, I agree, blue is the primary color for Flowbite, for sure.

[tulup-conner]

You can follow this on #151, #153, #154, #155 (Ill continue updating this)

[tulup-conner]

#566