# 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 .

![](/files/-M6iox_VVU-RuVPTBTaR)

**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],
        }
    },
         ...
};

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-jumbo-react.g-axon.work/settings/updating-colors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.