# Color Presets

Able Pro comes up with 6+ theme color presets. You can now change the available color presets by doing the following steps:

Color Preset files are available in **`src\themes\theme\`** directory.

{% tabs %}
{% tab title="VITE (TS)" %}

```
...
├── default.ts
├── theme1.ts
├── ..
├── ..
├── ..
├── theme8.ts
```

{% endtab %}

{% tab title="VITE (JS)" %}

```
...
├── default.js
├── theme1.js
├── ..
├── ..
├── ..
├── theme8.js
```

{% endtab %}
{% endtabs %}

Edit & Choose your desired preset color setting in **`src\config`** file. Change the **`presetColor`** value to `theme1, theme2 to theme6`

{% tabs %}
{% tab title="VITE (TS)" %}
{% code title="src /config.ts" %}

```typescript
// types
import { DefaultConfigProps } from 'types/config';

// ==============================|| THEME CONSTANT ||============================== //
...
...
// ==============================|| THEME CONFIG ||============================== //

const config: DefaultConfigProps = {
  ...
  presetColor: 'default',
  ...
};

export default config;
```

{% endcode %}
{% endtab %}

{% tab title="VITE (JS)" %}
{% code title="src /config.js" %}

```javascript
// ==============================|| THEME CONSTANT ||============================== //
...
...
// ==============================|| THEME CONFIG ||============================== //

const config = {
  ...
  presetColor: 'default',
  ...
};

export default config;
```

{% endcode %}
{% endtab %}
{% endtabs %}