> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/berry/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/berry/theme/color-presets.md).

# Presets

Berry has several color themes to choose from, including 6+ preset options. To change the color theme, you can follow these steps:

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

{% tabs %}
{% tab title="VITE" %}
{% code title="src/themes/theme" %}

```
..
├── default.ts
├── theme1.ts
├── ..
├── ..
├── ..
├── theme6.ts
├── ...
```

{% endcode %}
{% endtab %}

{% tab title="NEXT" %}
{% code title="src/themes/theme" %}

```
..
├── default.ts
├── theme1.ts
├── ..
├── ..
├── ..
├── theme6.ts
├── ...

```

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

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

**`presetColor: theme1`**

```typescript
const config = {
    ...
    presetColor: 'default', // default, theme1, theme2 to theme6 available
    ...
    ...
    ...
}
```

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

**`presetColor: theme1`**

{% tabs %}
{% tab title="TypeScript" %}

```typescript
import { ConfigStates } from 'types/config';
...

const config: ConfigStates = {
    ...
    presetColor: 'default', // default, theme1, theme2, theme3, theme4, theme5, theme6
    ...
};
```

{% endtab %}
{% endtabs %}