skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix theming docs regarding mat class prefix (#3013)

Browse Source
This commit is contained in:
Andrew Seguin
2017-02-09 12:22:01 -08:00
committed by tinayuangao
parent 30c57f8282
commit fe113eb2b2
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
guides/theming.md
+10 -10
View File
@@ -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
@@ -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
@@ -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);
}