Skip to content

Commit fe113eb

Browse files
andrewseguintinayuangao
authored andcommitted
fix theming docs regarding mat class prefix (#3013)
1 parent 30c57f8 commit fe113eb

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

guides/theming.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ The actual path will depend on your server setup.
4141
You can also concatenate the file with the rest of your application's css.
4242

4343
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
4545
ensures that the proper theme background is applied to your page.
4646

4747
### Defining a custom theme
@@ -55,19 +55,19 @@ the corresponding styles. A typical theme file will look something like this:
5555

5656
// Include the base styles for Angular Material core. We include this here so that you only
5757
// have to load a single css file for Angular Material in your app.
58-
@include md-core();
58+
@include mat-core();
5959

6060
// Define the palettes for your theme using the Material Design palettes available in palette.scss
6161
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
6262
// 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);
6565

6666
// The warn palette is optional (defaults to red).
67-
$candy-app-warn: md-palette($md-red);
67+
$candy-app-warn: mat-palette($mat-red);
6868

6969
// 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);
7171

7272
// Include theme styles for core and each component used in your app.
7373
// 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
9696
secondary dark theme:
9797
```scss
9898
.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);
102102

103-
$dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
103+
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
104104

105105
@include angular-material-theme($dark-theme);
106106
}

0 commit comments

Comments
 (0)