> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/vuely/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/vuely/vuely-vuejs/themes.md).

# Themes

Vuely comes with interactive themes. You can select any one of them according to your needs. In this section you will get detailed documentation on the usage of these themes.

Vuely have 6 predefined themes which you can see under the `src->themes` folder:

```
-themes
 --accentTheme.js            // Accent theme
 --dangerTheme.js            // Danger theme
 --infoTheme.js              // Info theme
 --primaryTheme.js           // Primary theme
 --successTheme.js           // Success theme
 --warningTheme.js           // Warning theme
```

There is a number assigned to each & every theme in the vuely. You can use this number to update the theme settings of your template. Check about the number assigned to particular theme in the given table:

| Theme Name    | Number Assigned |
| ------------- | --------------- |
| Primary Theme | 0               |
| Warning Theme | 1               |
| Success Theme | 2               |
| Danger Theme  | 3               |
| Info Theme    | 4               |
| Accent Theme  | 5               |

Open `src->store->modules->settings->index.js` file to update the theme settings of your project. Search for the `selectedTheme` key and update the value to `theme[Number_Assigned_To_Selected_Theme]`

For Example:

{% code title="index.js" %}

```javascript
const state = {
  ...
  selectedTheme: themes[3],// for danger theme, like wise themes[0] for Primary Theme
  ...
}
```

{% endcode %}