How make web application color scheme changeable using react?

Question

Let's say, we have a react web application, developed with react-bootstrap. This application has to be customizable with a color picker. The user selects the base color and the color scheme with several automatically chosen secondary colors is adopted throughout the whole web application GUI.

Remembering that react-way is to use inline styles for each individual component, I'm wondering how to do this in react with react-bootstrap?

Answer 1

You might want to look in React CSS Modules, which will allow you to use dynamic style objects. The code can be read easily and will function properly. This will however require to have predefined themes.

The second approach is having the color defined in redux store or adjacent component, that passes it as prop to all of it's children.

However I advise not to let user pick any color with a custom color picker. If you let the user pick a color with RGB, remember there are 16777216 color combinations. You cannot just make alternative color all that easily by darkening any given color, since there is a great chance that changing only e.g. the brightness to lower might reduce contrast with the secondary color.

Answer 2

If you want to make your app themable you might need:

1. Tool to create themes
2. Approach to implement this themes to your app

As a tool you might try this storybook-addon-material-ui (wich allows to create theme objects for all purposes despite the presence of Material-UI in the title)

Then to provide your themes to your app you may use react-theme-provider. It just pass theme data into your Components via context, so you can implement any framework or set your colors manualy when you need it. It also has an API for theme switching.