logo The World’s #1 Bootstrap 4 HTML, Angular 9, React, VueJS & Laravel
Admin Dashboard Theme

Angular SASS Customization

To customize the theme to match your brand requirements you can refer to the SASS config and customize some of the sass variables. Also you can add your own sass code to customize the layout as you wish.

Basically the global sass variables to configure the global font family, state colors and other style attributes you need to tweak the config variables located in [metronic]/theme/angular/[demo]/src/sass/_config.scss

Metronic uses Angular Material (https://material.angular.io/) as a primary library for UI components. The Angular Material integration with Metronic are done based on the Metronic's global SASS config.

[metronic]/theme/angular/[demo]/src/sass/_config.scss

The Angular Material SASS file is defined in:

[metronic]/theme/angular/[demo]/src/sass/global/integration/frameworks/angular/material/_angular-material.scss

For more info on the Google Material theme please refer to: https://material.angular.io/guide/theming. Once you do any changes in SASS it will be auto compiled and you can see the result.