# Theme Color

The Hipster uses MUI's theming by default. You can create theme color schemes with defining theme configuration objects.

For the configuration options checkout Material UI's configuration <https://mui.com/customization/theming/&#x20>;

In the Hipster you can find out the configuration @src/@hpstr/utility/AppContextProvider/defaultConfig.js

&#x20;You can change **defaultTheme** value according to your requirements.

He have some default theme options like below you can also change your color according the requirements

```
src/shared/constants/ColorSets.js

const colorSet = [
  {
    mode: 'light',
    primary: {
      main: '#2196F2',
    },
    secondary: {
      main: '#FF4981',
    },
    background: backgroundLight,
    text: textLight,
    title: 'Light',
  },
  {
    primary: {
      main: '#2196F2',
    },
    secondary: {
      main: '#FF4981',
    },
    background: backgroundDark,
    text: textDark,
    title: 'Dark',
  },
  {
    mode: 'light',
    primary: {
      main: '#2745EA',
    },
    secondary: {
      main: '#F9911C',
    },
    background: backgroundLight,
    text: textLight,
    title: 'Light-1',
  },...
]
```
