Skip to content

docs(compatibility): fix theming docs regarding mat class prefix #3013

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 9, 2017
Merged

docs(compatibility): fix theming docs regarding mat class prefix #3013

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions guides/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ The actual path will depend on your server setup.
You can also concatenate the file with the rest of your application's css.

Finally, if your app's content **is not** placed inside of a `md-sidenav-container` element, you
need to add the `md-app-background` class to your wrapper element (for example the `body`). This
need to add the `mat-app-background` class to your wrapper element (for example the `body`). This
ensures that the proper theme background is applied to your page.

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

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include md-core();
@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.
$candy-app-primary: md-palette($md-indigo);
$candy-app-accent: md-palette($md-pink, A200, A100, A400);
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);

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

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
Expand Down Expand Up @@ -96,11 +96,11 @@ some selector. For example, we could append the following to the example above t
secondary dark theme:
```scss
.unicorn-dark-theme {
$dark-primary: md-palette($md-blue-grey);
$dark-accent: md-palette($md-amber, A200, A100, A400);
$dark-warn: md-palette($md-deep-orange);
$dark-primary: mat-palette($mat-blue-grey);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);

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

@include angular-material-theme($dark-theme);
}
Expand Down