Create and Manage Themes with Angular Material Theming
This lesson explores the theming hooks Angular Material provides to create a custom look and feel for your application. We will discuss best practices for creating and managing your own theme and theming custom components.
Instructor: [00:00] In our previous lessons, we've been using Angular Material's built-in themes. While this works in basic scenarios, in a real app you'll probably want to customize your own theme. Let's see how this works.
[00:10] To start, you need to import the Angular Material theming mixins. These are helpers that set up the base Material styling as well as configure your theme based on your custom Material color combination. The first mixin you'll want to include is mat-core. This configures all the non-theme-dependent Material styling, such as typography, elevation helpers, ripple effects, and overlays.
[00:35] Next, you'll want to configure the colors to be used in your application or your application's palette. To do this, we'll utilize the mat-palette mixin. We'll store the result in a Sass variable called primary.
[00:47] The mat-palette mixin accepts a base palette, returning a palette or a map of additional color variables, including lighter and darker variations, and additional color contrasts which your application may need.
[00:57] To find out which colors are available for your palette, you can check out the colors section on the Material Design guidelines site. You can also take a look at the theming Sass file and find the appropriate color variables. If you're interested, these include the contrast and hues that will be used within your palette.
[01:15] Next, you need to create a palette for your accent color. We'll go ahead and use the Material palette mixin again. For now, we'll choose pink to match our current theme. For our accent color, we will also utilize the three optional parameters for the mat-palette mixin. This gives us fine-grained control over the default lighter and darker colors for a particular palette.
[01:32] To see which options are available, you can again utilize the Material Design color guidelines site or come into the theming Sass file and look at the particular color you're interested in.
[01:42] Next, we need to create an overall theme color map by using the mat-light-theme mixin, passing it our already created primary and accent palettes. This mixin will utilize these color palette maps as well as the default for the warn color, returning an aggregated app-theme color map.
[01:57] All that's left to do is invoke the angular-material-theme mixin, passing it the theme we just created. This includes all the component styles, passing it the theme map for appropriate coloring. When we refresh, we can see we had the same colors we had before with the prebuilt theme. There's also a Material dark-theme mixin which modifies your theme's foreground and background colors.
[02:18] Now that we have our theme configured, let's see how easy it is to switch up the theme's palettes. Let's go ahead and modify the primary color to purple and our accent color to blue. We'll also switch this back to a light theme. When we refresh, we can see our theme has updated accordingly.
[02:31] One thing you may want to do is create your own custom styling that depends on your theme's colors. To do this, we can take a similar strategy to the Material component mixins. We'll create our own mixin which accepts the theme. We can retrieve our palettes using Sass as map kit helper, assigning each to a variable.
[02:49] Once that's complete, we can reference a particular color from the palette using the mat-color mixin. For demonstrations, we're going to create a primary text class and pass the mat-color mixin our primary palette. Next, we need to import our mixin from the lessons folder and include it underneath our Material theme, passing it our theme variable.
[03:05] Let's create a header with our class applied just to make sure this is working. When we refresh, we can see the primary theme color is applied to the text. We can also pull specific shades out using the mat-color mixin. For instance, if we want the darker shade from that palette, we can supply it as a second parameter. You can also supply a third parameter to influence the color's opacity.
[03:27] Lastly, if your app is going to have multiple themed modules, it's good practice to create an app-theme mixin that then includes the rest of your module mixins. Here, I'm creating an egghead-app-theme mixin that then invokes our custom theme mixin. We can then import this into our main stylesheet and include it under the creation of our Angular Material theme.