Angular Material
Angular Material contains components for angular which follow material design.
Getting Started
- Install Angular Material
ng add @angular/material
- Create a theme following this guide.
Themes
Theming Angular material is pretty simple but there is very little documentation on it.
First you need to create a theme scss file and add it to your styles array.
theme.scss@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@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. Available color palettes: https://material.io/design/color/
$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: mat-palette($mat-red);
// Create the theme object. A theme consists of configurations for individual
// theming systems such as `color` or `typography`.
$candy-app-theme: mat-light-theme((
color: (
primary: $candy-app-primary,
accent: $candy-app-accent,
warn: $candy-app-warn,<br />
)
));
// 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.
@include angular-material-theme($candy-app-theme);
Theming Componenets
For each component you want to theme, you should create a mixin. This mixin will contain custom CSS rules for your component based on the global theme.
You can call this my_component.component.scss-theme.scss.
Within Google, they name theme files my_component-theme.scss and the main scss file my_component.scss.
This file should not be included in your @Component's styleUrls.
// Import library functions for theme creation.
@import '~@angular/material/theming';
@mixin candy-carousel-color($config-or-theme) {
// Extract the color configuration in case a theme has been passed.
// This allows consumers to either pass a theme object or a color configuration.
$config: mat-get-color-config($config-or-theme);
// Extract the palettes you need from the theme definition.
$primary: map-get($config, primary);
$accent: map-get($config, accent);
// Define any styles affected by the theme.
.candy-carousel {
// Use mat-color to extract individual colors from a palette.
background-color: mat-color($config);
border-color: mat-color($config, A400);
}
}
@mixin candy-carousel-typography($config-or-theme) {
// Extract the typography configuration in case a theme has been passed.
$config: mat-get-typography-config($config-or-theme);
.candy-carousel {
font: {
family: mat-font-family($config, body-1);
size: mat-font-size($config, body-1);
weight: mat-font-weight($config, body-1);
}
}
}
@mixin candy-carousel-theme($theme) {
// Extracts the color and typography configurations from the theme.
$color: mat-get-color-config($theme);
$typography: mat-get-typography-config($theme);
// Do not generate styles if configurations for individual theming
// systems have been explicitly set to `null`.
@if $color != null {
@include candy-carousel-color($color);
}
@if $typography != null {
@include candy-carousel-typography($typography);
}
}
Next, in your main app theme file, import this mixin and pass in your global app theme:
theme.scss// Import library functions for theme creation. @import './my_component/my_component.component.scss-theme.scss';
//... Build your theme.
// Include theme styles for your custom components. @include candy-carousel-theme($theme);
Color Palettes
Get a color palette like this:
$config: mat-get-color-config($config-or-theme);
// Color Palettes
$primary: map-get($config, primary);
$accent: map-get($config, accent);
$warn: map-get($config, warn);
$foreground: map-get($config, foreground);
$background: map-get($config, background);
To get a specific color from a palette, use mat-color($palette, $key):
a {
color: mat-color($foreground, text);
}
# mat-color($primary, 50); is the lightest color
# mat-color($primary, 900); is the darkest color
# mat-color($primary, lighter); defaults to 100
# mat-color($primary); defaults to 500
# mat-color($primary, darker); defaults to 700
# mat-color($primary, '500-contrast'); gets contrast colors for text
Some keys for foreground include: base, divider, text.
See _palette.scss for all available keys. See _theming.scss for a more in-depth understanding about theming.