ng add @angular/material
Also add these classes to the body: class="mat-app-background mat-typography"
Using Material styles for styling components:
@import '~@angular/material/theming';
.custom-elem {
color: mat-color($mat-green, 700);
}
A material palette consist of a range of colors with different contrast. They use a number system as a key for which color to use. The 500 is the default color.
Add default Material theme
angular.json:
{
// ...
"projects": {
"project-name": {
// ...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// ...
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/assets/styles/styles.scss"
],
Angular Material custom theme
assets/styles/project-name-theme.scss:
// https://material.angular.io/guide/theming
@use '~@angular/material' as mat;
@include mat.core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$project-primary: mat.define-palette(mat.$cyan-palette, 800);
$project-accent: mat.define-palette(mat.$cyan-palette, 600);
// The warn palette is optional (defaults to red).
$project-warn: mat.define-palette(mat.$orange-palette);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$project-app-theme: mat.define-light-theme(
(
color: (
primary: $project-primary,
accent: $project-accent,
warn: $project-warn,
),
)
);
$project-typography: mat.define-typography-config(
$font-family: 'Cabin'
);
@include mat.all-component-typographies($project-typography);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($project-app-theme);
index.html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Project Name</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body class="mat-app-background mat-typography"> <app-main> <h3>Loading...</h3> </app-main> </body> </html>
angular.json:
{
// ...
"projects": {
"project-name": {
// ...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// ...
"styles": [
"src/assets/styles/project-name-theme.scss",
"src/assets/styles/styles.scss"
],
Material Elevation
https://material.angular.io/guide/elevation
@import '~@angular/material/theming';
// from node_modules/@angular/material/_theming.scss
// <div class="mat-elevation-z2">Some elevated content</div>
.card {
@include mat-elevation(2);
&:hover {
@include mat-elevation(8);
}
}
You can add classes to add bg drop shadow: mat-elevation-z1 to mat-elevation-z24