# Theming

Ng-Matero's theme system provides two commonly used layouts (`side navigation` and `top navigation`), menu services,page title component and breadcrumb component, commonly used css helpers, etc。

> It is recommended that you choose a fixed layout type during project initialization, and do not use `options` to set the layout after project startup unless you have special requirements.

Ng-Matero's theme styles are written based on Sass, so users must understand the basics of Sass. The theme style directory is as follows:

```
├── theme                               
│   ├── style                           
│   │   ├── core   
│   │   ├── functions   
│   │   ├── mixins
│   │   ├── widgets
│   │   ├── _colors.scss
│   │   ├── _core.scss
│   │   ├── _functions.scss
│   │   ├── _mixins.scss
│   │   ├── _variables.scss
│   │   ├── _widgets.scss
│   │   └── theming.scss 
```

`sidenav` and `topnav` used mixins to make it easier to change the theme color.

```css
@mixin matero-admin-theme($theme) {
  @include matero-sidenav-theme($theme);
  @include matero-topnav-theme($theme);
}
```

![](https://3584588324-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwvWyT-SaX7HVIsX4F7%2F-LwvsuOp2r8GjEbBxDgu%2F-LwvsvtGuCGIPiTfN4AH%2Ftheme.jpg?alt=media\&token=12046c79-03aa-465d-8cd8-788bc805ec8e)