# Color

#### Customize Theme Colors

To change the color of the theme, you can either apply the color directly to `src\theme\palette.tsx` **or** define a new variable in `src\assets\scss\_themes-vars.module.scss` and replace it in `palette.tsx`

For instance, if you want to change the color that `theme.palette.primary.light` is being used in a theme, then update the following in **`src\themes\palette.tsx`**

{% tabs %}
{% tab title="Typescript" %}
{% code title="" %}

```typescript
import defaultColor from 'assets/scss/_themes-vars.module.scss';

/**
 * Color intention that you want to used in your theme
 */
export default function Palette(mode: ThemeMode, presetColor: PresetColor) {
  let colors: ColorProps;
  switch (presetColor) {
    case 'theme1':
      colors = theme1;
        ...
        ...
    };
    
  return createTheme({
    palette: {
      mode,
      common: {
        black: colors.darkPaper
      },
      ...
    }
  });
}
```

{% endcode %}
{% endtab %}

{% tab title="Javascript" %}

```javascript
import defaultColor from 'assets/scss/_themes-vars.module.scss';

/**
 * Color intention that you want to used in your theme
 */
export default function Palette(mode, presetColor) {
  let colors: ColorProps;
  switch (presetColor) {
    case 'theme1':
      colors = theme1;
        ...
        ...
    };
    
  return createTheme({
    palette: {
      mode,
      common: {
        black: colors.darkPaper
      },
      ...
    }
  });
}
```

{% endtab %}
{% endtabs %}

{% code title="src/themes/palette.tsx" %}

```javascript
import defaultColor from 'assets/scss/_themes-vars.module.scss';

/**
 * Color intention that you want to used in your theme
 */
export default function Palette(mode: ThemeMode, presetColor: PresetColor) {
  let colors: ColorProps;
  switch (presetColor) {
    case 'theme1':
      colors = theme1;
        ...
        ...
    };
    
  return createTheme({
    palette: {
      mode,
      common: {
        black: colors.darkPaper
      },
      ...
    }
  });
}
```

{% endcode %}