I recently used the Angular Material component library for my personal projects, and it’s not hard to use its theme interface. Here’s a summary of how Material’s default theme is used. By default, all projects are created using the Angular CLI, ensuring that projects have a canonical file structure for use case exposition.

Angular Material’s theme system includes theme color and Text layout modules that support full customization. But first let’s take a look at what these two modules contain and how to use the default themes to implement the Material component library out of the box.

Theme colors

Angular Material theme colors contain a set of “palette” colors that compose Material components. The so-called “color palette” is a variety of colors defined by Material Design standards, and each color can be selected by (50,100,200… 900), adjust the hue (hue) from light to dark to get different color values.

A theme color consists of the following types:

  • Primary: The primary color. It is widely used in all application locations.
  • Accent: Accent colors, used for Material’s unique “FAB” (floating action button), and sections that emphasize interaction.
  • Warn: Warning color, indicating errors and warning status.
  • Foreground: Foreground, used of text and ICONS.
  • Background: Background color, used for element background.

typography

Angular Material text typesetting is based on the Material design specification, which defines multiple levels, each consisting of font-size, line-height, and font-weight style configurations.

The levels defined are:

The hierarchy The CSS class describe
display-1 ~ display-4 .mat-display-1 ~ .mat-display-4 A large, one-off headline, often used at the top of a home page
headline .mat-h1, .mat-headline with<h1>The header of the section corresponding to the tag
title .mat-h2, .mat-title with<h2>The header of the section corresponding to the tag
subheading-2 .mat-h3, .mat-subheading-2 with<h3>The header of the section corresponding to the tag
subheading-1 .mat-h4, .mat-subheading-1 with<h4>The header of the section corresponding to the tag
body-1 .mat-body, .mat-body-1 Basic body text
body-2 .mat-body-strong, .mat-body-2 Thicker body text
caption .mat-small, .mat-caption Smaller body text and prompt text
button Only used in components Buttons and links
input Only used in components Form input field

Using a preset theme

Angular Material builds several built-in themes up front. These CSS files contain common styles for all Material components, typography, and theme colors. Therefore, to use the Material component library, you simply introduce one of the individual CSS files into your application. In the project root directory of the style.css. Direct reference in the CSS @ import ‘@ presents/Material/prebuilt themes/theme name. CSS’. Available default themes are:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

Before using it, you need to include 300, 400, and 500 weight Roboto fonts in your project: < link href = “https://fonts.googleapis.com/css?family=Roboto:300, 400500” rel = “stylesheet” >

In this way, all Material components can be formatted with preset colors and text to render their appearance. You can also set the Material font style for any native element:

<h1 class="mat-display-1">Jackdaws love my big sphinx of quartz.</h1>
<h2 class="mat-h2">The quick brown fox jumps over the lazy dog.</h2>
Copy the code

Note ✨ : The default theme CSS introduced by default does not affect any elements other than the Material component.

  • If the application content is not placed inside the page layout container component < mat-Sidenav-Container >, the.mat-app-background class needs to be added to the outer element (for example, ). To give your app a Material theme background color.

  • If you need to set the Material font layout globally for your application, you need to set the mat-Typography class for the elements of the root node. Such as:

    <! -- not affected.
<h1>This header is unstyled</h1>

<! -- All elements will be styled according to the Material font.
<section class="mat-typography">
  <h1>The headline style for Material will apply to this content</h1>
</section>
Copy the code

summary

Introduction to the Material’s theme system includes:

  • Theme colors are defined as “primary colors”, “accent colors”, “warning colors”, “foreground colors”, and “background colors”. Each color is a “palette”, which can show different shades of color through the hue, making the interface color rich without clutter.

  • Font size, line-height and font-weight are used to define multiple levels from large to small to unify the text specifications of the Material component.

  • There are four preset themes, and when using the Material component, the style.css in the project root directory is imported directly into one of the CSS files. To keep the typography of the entire application consistent with the Material component, simply add a.mat-Typography class to the root element, such as body.

However, in practical development, in addition to directly using the preset component look, we usually need to customize our own color scheme, font layout, or other business components other than the Material component to be consistent with the Material style.

This requires us to customize the theme system of the Material. See 😎 in the next article.