Documentation
Guides
Customization

## Theme Layouts

As previously mentioned, Fuse comes with variety of different layouts. These layouts are on the theme level, meaning that when changed, they can completely alter the look of your app.

By default, layouts are applied automatically via the `LayoutComponent`. The default layout is set by the `app.config.ts` file from app/core/config/ directory. This configuration file is supplied as the default configuration to the `FuseConfigService` which is a custom made configuration service to store, write and read application wide configurations.

More detailed information about `FuseConfigService` can be found in the Fuse Components > Services > Config section of this documentation.

After the default layout is read and set from the configuration service, `LayoutComponent` will also read the current route tree, walk through it starting from the root all the way to the current route and look for the layout key-value from the data object. If found, `LayoutComponent` will switch to that layout. This is particularly useful if you want to have different layouts for different portions of your app.

Here's an example from `app.routing.ts` file that loads the `EmptyLayout` for authentication pages:

// Auth routes (guest) { path: '', canActivate: [NoAuthGuard], canActivateChild: [NoAuthGuard], component: LayoutComponent, data: { layout: 'empty' }, children: [ { path: 'sign-in' ... }, ] }

And here's another example that loads the classic layout:

{ path : 'some-path', component : SomeComponent, data: { layout: 'classic' // Load the classic layout for this route } }

## LayoutComponent

The `LayoutComponent` plays an important part for managing important things such as the current layout and the color theme. Because of it, removing the `LayoutComponent` and using the individual layouts by themselves is not possible.