Updating Color Scheme

Setting Color from the defined Colors:

Jumbo React comes with a lot of predefined color combinations. You can set the default color combination of your choice by following simple steps. To set the default color combination, you need to go to the following file :-

src/reducers/Settings.js

In this file, you can look for "themeColor" property and set its value as per your choice. List of available options can be found at :-

src/constants/ThemeColors.js

Adding New Color:

In order to add new color, you need to go to styles folder as it contains all the style and color related files. Style folder can be found at src/styles/

In the styles folder, you can find the folder global/. This global folder is the folder where we have defined all the Sass variables, mixins, placeholders etc. which are applied globally through the app.

Then, inside this global/ folder, there is a file _variables.scss.

In this file you will find theme color variables as specified in below screenshot. And can change their values to the ones you want those to be.

So, that is all you need to do change the color theme. If you are willing to make any further customization about the theme, now you know where to change .

Update Material UI theme color:

go to the file src/containers/themes/{themeName }.js, change primary and secondary object's variable.

     
import indigo from '@material-ui/core/colors/indigo';
import pink from '@material-ui/core/colors/pink';

export default {
    palette: {
        primary: {
            light: indigo[300],
            main: indigo[500],
            dark: indigo[700],
        },
        secondary: {
            light: pink[300],
            main: pink['A200'],
            dark: pink[700],
        }
    },
         ...
};