Skip to content

docs(guide): theming custom guide update for beta3 #3965

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

Closed
wants to merge 2 commits into from
Closed

docs(guide): theming custom guide update for beta3 #3965

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77f4801
docs(guide): theming custom guide update for beta3
Apr 8, 2017
76ec4ad
fix typo
Apr 8, 2017
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
8 changes: 4 additions & 4 deletions guides/theming-your-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ All you need is to create a `@mixin` function in the custom-component-theme.scss

```scss
// Import all the tools needed to customize the theme and extract parts of it
@import '~@angular/material/core/theming/all-theme';
@import '~@angular/material/theming';

// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin candy-carousel-theme($theme) {
Expand All @@ -33,7 +33,7 @@ Now you just have to call the `@mixin` function to apply the theme:

```scss
// Import a pre-built theme
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber';
@import '~@angular/material/prebuilt-themes/deeppurple-amber';
// Import your custom input theme file so you can call the custom-input-theme function
@import 'app/candy-carousel/candy-carousel-theme.scss';

Expand All @@ -53,11 +53,11 @@ Styles that are affected by the theme should be placed in a separated theming fi


## Using colors from a palette
You can consume the theming functions from the `@angular/material/core/theming/theming` and Material palette vars from `@angular/material/core/theming/palette`. You can use the `mat-color` function to extract a specific color from a palette. For example:
You can consume the theming functions and Material palette from `@angular/material/theming`. You can use the `mat-color` function to extract a specific color from a palette. For example:

```scss
// Import theming functions
@import '~@angular/material/core/theming/theming';
@import '~@angular/material/theming';
// Import your custom theme
@import 'src/unicorn-app-theme.scss';

Expand Down