create a new project
ng new myapp
select scss for css files
once project is created open styles.scss and add the following code:
/* You can add global styles to this file, and also import other style files */
@import ‘~@angular/material/theming’;
// @import ‘../../mdc-typography/all-typography’;
$custom-typography: mat-typography-config(
$font-family: ‘”open sans”, “helvetica neue”, sans-serif’,
$display-4: mat-typography-level(112px, 112px, 300),
$display-3: mat-typography-level(56px, 56px, 400),
$display-2: mat-typography-level(45px, 48px, 400),
$display-1: mat-typography-level(34px, 40px, 400),
$body-2: mat-typography-level(16px, 24px, 600),
$body-1: mat-typography-level(16px, 22px, 400),
$caption: mat-typography-level(14px, 19px, 600),
$button: mat-typography-level(16px, 22px, 500),
$input: mat-typography-level(16px, 1.125, 400)
);
// $input: mat-typography-level(inherit, 1.125, 400)
$secondary-typography: mat-typography-config(
$font-family: ‘”minion-pro” , sans-serif’,
$headline: mat-typography-level(30px, 42px, 400),
$title: mat-typography-level(25px, 35px, 400),
$subheading-2: mat-typography-level(16px, 28px, 400),
$subheading-1: mat-typography-level(15px, 25px, 400)
);
// Override typography for all Angular Material, including mat-base-typography and all components.
// @include angular-material-typography($custom-typography);
@include mat-core($custom-typography);
$my-red: (
100: #ffcdd2,
200: #ef9a9a,
300: #e57373,
400: #ef5350,
500: #da291c,
600: #e53935,
700: #d32f2f,
800: #c62828,
900: #b71c1c,
A100: #ff8a80,
A200: #ff5252,
A400: #ff1744,
A700: #d50000,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white
)
);
$my-light-blue: (
100: #b3e5fc,
200: #81d4fa,
300: #4fc3f7,
400: #29b6f6,
500: #0099ff,
600: #039be5,
700: #0288d1,
800: #0277bd,
900: #01579b,
A100: #80d8ff,
A200: #40c4ff,
A400: #00b0ff,
A700: #0091ea,
contrast: (
50: $black-87-opacity,
100: $black-87-opacity,
200: $black-87-opacity,
300: $black-87-opacity,
400: $black-87-opacity,
500: white,
600: white,
700: white,
800: white,
900: white,
A100: $black-87-opacity,
A200: $black-87-opacity,
A400: $black-87-opacity,
A700: white
)
);
$my-app-primary: mat-palette($my-red);
$my-app-accent: mat-palette($my-light-blue, 500, 900, A100);
$my-app-warn: mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);
// Override typography for a specific Angular Material components.
@include mat-base-typography($secondary-typography);
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, “Helvetica Neue”, sans-serif; }
for more information visit : https://material.angular.io/guide/theming
Life Coders 