search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.89k stars 422 forks source link

ThemeContext export #255

Closed asabadyr closed 2 years ago

asabadyr commented 2 years ago

Is your feature request related to a problem? Please describe. Using third party components (nivo.rocks). Need to adapt text color in charts according to the dark/light mode. The best option would be getting access to the ThemeContext that is used internally in Flowbite.

Describe the solution you'd like export ThemeContext to be able to use in components

Describe alternatives you've considered useEffect with a window storage listener to get 'theme' value doesn't work

rluders commented 2 years ago

@tulup-conner would be the solution for it similar to #244? What do you think?

IMHO, we need to start to export the context functions to allow users to access it. Maybe the cases are similar, but not the same...

PS: I changed my mind about the export of the context. I don't think that it is really necessary.

tulup-conner commented 2 years ago

I don't see a reason not to export them.

zhex900 commented 2 years ago

Once the ThemeContext exported, theme can be customised?

rluders commented 2 years ago

@zhex900 you don't need the ThemeContext to customize the theme. All that you need is to create your own theme, based on FlowbiteTheme and use it:

<Flowbite theme={yourTheme}>
   <App />
</Flowbite>

https://flowbite-react.com/theme

asabadyr commented 2 years ago

Hi team, any news on this? Thanks

rluders commented 2 years ago

I was thinking about this one and I do have an extra question here @asabadyr:

Since the ThemeContext also adds to the <html> the class="dark" property, can't you use it to customize the style of the charts?

asabadyr commented 2 years ago

I was thinking about this one and I do have an extra question here @asabadyr:

Since the ThemeContext also adds to the <html> the class="dark" property, can't you use it to customize the style of the charts?

It's possible to do a number of ways even reading from localStorage. but when user switches to dark/light mode the tree of components is not re-rendered. in fact I have no way to listen to the event of mode change. Another option would be to add a callback to the mode switch component to be able to react to this switch.