Polyakoff Polyakoff - 24 days ago 20
React JSX Question

How make web application color scheme changeable using react?

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

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.

Comments