@@ -41,7 +41,7 @@ The actual path will depend on your server setup.
41
41
You can also concatenate the file with the rest of your application's css.
42
42
43
43
Finally, if your app's content ** is not** placed inside of a ` md-sidenav-container ` element, you
44
- need to add the ` md -app-background` class to your wrapper element (for example the ` body ` ). This
44
+ need to add the ` mat -app-background` class to your wrapper element (for example the ` body ` ). This
45
45
ensures that the proper theme background is applied to your page.
46
46
47
47
### Defining a custom theme
@@ -55,19 +55,19 @@ the corresponding styles. A typical theme file will look something like this:
55
55
56
56
// Include the base styles for Angular Material core. We include this here so that you only
57
57
// have to load a single css file for Angular Material in your app.
58
- @include md -core ();
58
+ @include mat -core ();
59
59
60
60
// Define the palettes for your theme using the Material Design palettes available in palette.scss
61
61
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
62
62
// hue.
63
- $candy-app-primary : md -palette ($md -indigo );
64
- $candy-app-accent : md -palette ($md -pink , A200 , A100 , A400 );
63
+ $candy-app-primary : mat -palette ($mat -indigo );
64
+ $candy-app-accent : mat -palette ($mat -pink , A200 , A100 , A400 );
65
65
66
66
// The warn palette is optional (defaults to red).
67
- $candy-app-warn : md -palette ($md -red );
67
+ $candy-app-warn : mat -palette ($mat -red );
68
68
69
69
// Create the theme object (a Sass map containing all of the palettes).
70
- $candy-app-theme : md -light-theme ($candy-app-primary , $candy-app-accent , $candy-app-warn );
70
+ $candy-app-theme : mat -light-theme ($candy-app-primary , $candy-app-accent , $candy-app-warn );
71
71
72
72
// Include theme styles for core and each component used in your app.
73
73
// Alternatively, you can import and @include the theme mixins for each component
@@ -96,11 +96,11 @@ some selector. For example, we could append the following to the example above t
96
96
secondary dark theme:
97
97
``` scss
98
98
.unicorn-dark-theme {
99
- $dark-primary : md -palette ($md -blue-grey );
100
- $dark-accent : md -palette ($md -amber , A200 , A100 , A400 );
101
- $dark-warn : md -palette ($md -deep-orange );
99
+ $dark-primary : mat -palette ($mat -blue-grey );
100
+ $dark-accent : mat -palette ($mat -amber , A200 , A100 , A400 );
101
+ $dark-warn : mat -palette ($mat -deep-orange );
102
102
103
- $dark-theme : md -dark-theme ($dark-primary , $dark-accent , $dark-warn );
103
+ $dark-theme : mat -dark-theme ($dark-primary , $dark-accent , $dark-warn );
104
104
105
105
@include angular-material-theme ($dark-theme );
106
106
}
0 commit comments