From 4a66566d90f6fab8b47c556a50cca2ee452d4502 Mon Sep 17 00:00:00 2001 From: Ales Rechtorik Date: Mon, 10 Apr 2017 15:15:07 +0200 Subject: [PATCH 1/2] update theming --- guides/theming.md | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/guides/theming.md b/guides/theming.md index 390c51b8f316..cf76c1a2413b 100644 --- a/guides/theming.md +++ b/guides/theming.md @@ -71,8 +71,10 @@ export class YourAppModule { ### Defining a custom theme When you want more customization than a pre-built theme offers, you can create your own theme file. -A theme file is a simple Sass file that defines your palettes and passes them to mixins that output -the corresponding styles. A typical theme file will look something like this: +A theme file is a simple Sass file that defines your palettes, which you can then `@import` in your main style file and generate corresponding styles using the `angular-material-theme()` mixin, as well as `@import` it in your custom components and utilize all of the material mixins, functions and variables. + +A typical theme file will look like this: + ```scss @import '~@angular/material/theming'; // Plus imports for other components in your app. @@ -96,9 +98,17 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy- // 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. +``` + +```scss +// in your main styles file +@import '../path/to/my/candy-app-theme'; + @include angular-material-theme($candy-app-theme); ``` +*note: you can safely import your `candy-app-theme.scss`, in any custom component and use functions and variables, such as `mat-color($candy-app-primary)`, since the theme file doesn't generate any styles on itself* + You only need this single Sass file; you do not need to use Sass to style the rest of your app. If you are using the Angular CLI, support for compiling Sass to css is built-in; you only have to @@ -134,7 +144,7 @@ With this, any element inside of a parent with the `unicorn-dark-theme` class wi dark theme. ### Theming your own components -For more details about theming your own components, +For more details about theming your own components, see [theming-your-components.md](./theming-your-components.md) ### Future work From 574927343dc06fdaafe05a431286dbf28cff8ce4 Mon Sep 17 00:00:00 2001 From: Ales Rechtorik Date: Mon, 10 Apr 2017 15:18:05 +0200 Subject: [PATCH 2/2] update theming guide --- guides/theming.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/guides/theming.md b/guides/theming.md index cf76c1a2413b..5acae405eab8 100644 --- a/guides/theming.md +++ b/guides/theming.md @@ -77,11 +77,6 @@ A typical theme file will look like this: ```scss @import '~@angular/material/theming'; -// Plus imports for other components in your app. - -// 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 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 @@ -94,14 +89,15 @@ $candy-app-warn: mat-palette($mat-red); // Create the theme object (a Sass map containing all of the palettes). $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 -// that you are using. ``` ```scss -// in your main styles file +// In your main styles file + +// 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 mat-core(); + @import '../path/to/my/candy-app-theme'; @include angular-material-theme($candy-app-theme);