# Layouts

### Default Layout <a href="#default-layout" id="default-layout"></a>

Vuely Angular by default has traditional admin layout but also provides you flexibility to choose your own.

![Default Layout](https://2330000780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF1B-IA07NduZLLz_4Z%2F-LbgoTCISRyxNP7l4M-h%2F-LbgopprqbvXodx7IB40%2FVuely%20%20%20Angular%207%20Admin%20Template.png?alt=media\&token=cc4b3fa5-0315-4c03-833f-cd7309ab2551)

### Mini Sidebar <a href="#mini-sidebar" id="mini-sidebar"></a>

To enable mini sidebar layout, go to`src->app->Layouts->VerticalLayout` and open `VerticalLayout.component.html` file, Now search for the collapsed-sidebar class at div `<div [dir]="layout"`  & change its value to true.

{% code title="VerticalLayout.component.html" %}

```
'collapsed-sidebar': true
```

{% endcode %}

![Mini Sidebar Layout](https://2330000780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF1B-IA07NduZLLz_4Z%2F-Lbgw4X6HJGqaoensscq%2F-Lbgw9H0MaHpM4anJdOl%2FVuely%20%20%20Angular%207%20Admin%20Template%20\(1\).png?alt=media\&token=92658451-9448-4183-a0f3-351294901f1d)

### Dark Mode <a href="#dark-mode" id="dark-mode"></a>

To enable the dark mode in the template, go to`src->app->Layouts->VerticalLayout` and open `VerticalLayout.component.html` file & search for the `theme-light` class at div `<div [dir]="layout"`

{% code title="VerticalLayout.component.html" %}

```
<div [dir]="layout" class="app-main theme-light ....">
    ....
</div>
```

{% endcode %}

Now Replace the `"theme-light"` class with  `"theme-dark"` class. Like mention below :

{% code title="VerticalLayout.component.html" %}

```
<div [dir]="layout" class="app-main theme-dark ....">
    ....
</div>
```

{% endcode %}

![Dark Mode](https://2330000780-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF1B-IA07NduZLLz_4Z%2F-LbgxvQWsP0KtzdpxslF%2F-Lbh17NJ2O1Xkov4Rlfy%2FVuely%20%20%20Angular%207%20Admin%20Template%20\(2\).png?alt=media\&token=fe63bff8-1c28-4213-be21-6cdb723bfae1)
