Angular-Material 2 Theme Tutorial
Recently, the Angular 2 version of angular-material from Google received the long-await theming options. In contrast to the JavaScript theming from angular-material v1 they opted for a powerful mixin driven SCSS theme.
Choosing a Material Design color palette
If you use the official Material Design palette (which you should), you’re able to use all kinds of free color tools & apps on the web! Here are some of my favs:
- Material Palette (web)— a simple web tool to quickly test a primary & accent color on an interface
- Material Colors (macOS) - macOS desktop app (React Native version)
- Materialette (macOS/Windows/Linux) — toolbar app with hex/rgb
- MaterialUI (web) — hex/rgb/rgba web palette selection
- MaterialUIColors (web) — another web hex/rgb/rgba selection
theme.scss
In the /src directory of your ng2 app simply add this theme.scss:
That’s it! 7 lines of code to theme your entire Angular-Material 2 app!
Select your primary & accent colors
To edit the theme you simple swap our the orange & light-bluefrom that code snippet and insert your two colors. You can also adjust the hue (the numbers) to a lighter or darker shade, covered in all Material palette docs & apps. In this example I change to green & light-blue:
$primary: mat-palette($mat-green, A400);
$accent: mat-palette($mat-light-blue, A400);
Notice that the hue you select (A400 here) will automatically change the white text to dark text if necessary.
Dark Theme
To swap over to a dark theme simply change this one line:
$theme: mat-dark-theme($primary, $accent, $warn);
Using Color Mixins for custom styles
Angular-Material2 uses a utility scss file, styles.scss, which like theme.scss is located in /src and automatically compiles. By simply importing the theme.scss into styles.scss you can tap into the color mixins like so:
We use this handy little style to color the active icon:
Also notice the use of the dynamic contrasting color for the icon, which knows to turn white in this example with the dark hue of blue.
color: mat-color($accent, default-contrast);You can reference the available colors from the _palette.scss in Angular-Material2’s core styles.
Test this out for yourself!
My demo screenshots and code put the theme to use in Covalent, Teradata’s open-source Angular-Material2 UI Platform.
