Getting Started

Angular Material Theming System (v18)

9 Chapters · 00:57:00

  1. 1 Getting Started 00:05:00
  2. lock Development Environment 00:01:00
  3. lock Dimension: Color 00:21:00
  4. lock Dimension: Typography 00:03:00
  5. lock Dimension: Density 00:01:00
  6. lock CSS custom properties 00:08:00
  7. lock Components Themes 00:14:00
  8. lock Overrides API 00:01:00
  9. lock Component Color Variants 00:03:00

Overview

Version Compatibility

The content, code and steps explained this course, works with below versions of Angular, Angular Material/CDK and Material design:

IndexAngular/Angular Material/Angular CDKMaterial Design
118Material 3

What is covered?

Version 18: Simple, textual course (current course)

Below is the summary of what we will be covering in this course:

  1. Getting Started
    1. Overview - Summary of version compatibility, chapters, article titles and what is covered
    2. Angular Material Components - What is it and what are latest changes to adhere to the new Material 3 design system
    3. Theming Dimensions
  2. Development Environment
    1. Setting up the project
  3. Dimension: Color
    1. Using a pre-built theme
    2. Create a custom theme - Understand some important mixins and apply custom theme to Angular Material components
    3. Create a dark theme - We will also implement lazy loading for dark theme, so that it only loads when needed
    4. Theme construction - Understanding how themes are constructed in Angular Material 18
    5. Theme from custom colors
  4. Dimension: Typography
    1. Configuring Typography
  5. Dimension: Density
    1. Customizing density
  6. CSS custom properties - Learn how to modify theme for Angular Material 18 with CSS variables
    1. Overview
    2. Enable system variables
    3. Modify colors
    4. Modify typography
  7. Components Themes
    1. Getting theme values - In this we will learn how to get specific color, theme-type, typography and density values using both, SCSS functions and CSS variables
    2. Theming Other Components - Learn how to apply Angular Material’s theming to custom components
    3. Theming Angular Material Components - How to customize styles of Angular Material components. We will take the example of MatButton and add new variants for it
  8. Overrides API
    1. Overview - We will look at one more way to achieve customizations in Angular Material Components. I will show case an example to override `MatButton.
    2. All Properties - In this section, I will provide list of all the available properties for each Angular Material Components.
  9. Component Color Variants
    1. Overview - We will learn how to use -color (or -theme) mixin to get a variant for Angular Material component.
    2. All Variants - In this section, I will provide list of all the available color variants for each Angular Material Components.

Version 19: Advanced, video course - available here

  1. Latest updates - Created for Angular Material 19
  2. Lifetime access - Unlock perpetual access to everything existing, along with any future additions, all at a straightforward one-time cost.
  3. Watch anywhere, anytime - Access video lessons online and view them on your schedule.
  4. Live demos of each course - Each course includes a live demo that runs directly in your browser.
  5. Complete project files - Get access to all source code and project files used throughout the courses.
  6. Written guides & code references - Each lesson includes detailed text summaries and ready-to-use code snippets for quick reference.

Angular Material Components

The Angular team builds and maintains both common UI components and tools to help us build our own custom components. @angular/material is Material Design UI components for Angular applications.

Angular Material also provides tools that help developers build their own custom components with common interaction patterns.

Angular Material’s Theming System

Angular Material’s theming system lets you customize base, color, typography, and density styles for components in your application. The theming system is based on Google’s Material Design 3 specification which is the latest iteration of Google’s open-source design system, Material Design.

SASS Basics

Angular Material’s theming APIs are built with Sass. This document assumes familiarity with CSS and Sass basics, including variables, functions, and mixins.

Before moving ahead, It would be great if you have familiarity with SASS basics, including variables, functions, mixins, and use.

New changes of Material 3

Angular Material team announced first experimental support of Material 3 on Feb 14, 2024. You can read tha announcement here.

After around 3 months, with Angular 18, they announced stable support for Material 3 design. In this course, we are going to learn everything about Material 3 design for Angular Material.

This section delves into the key changes introduced in Material 3:

A New Color Palette

One of the most noticeable changes in Material 3 is the revamped color palette. The focus is on creating more vibrant and accessible color combinations.

  • Expanded Color System: Material 3 introduces tertiary colors, offering a wider range of options for creating distinctive and engaging user interfaces.
  • Tonal Structure: The color system now emphasizes tonal variations, providing depth and hierarchy to your designs.
  • Dynamic Theming: Leverage the power of dynamic color to create personalized experiences based on user preferences or system settings.

Typography Refinements

Material 3 brings a refined typography system that enhances readability and visual hierarchy.

  • Updated Font Weights: A more comprehensive set of font weights is available to create effective visual distinctions between different content levels.
  • Improved Text Scaling: The typography system ensures better scalability across various screen sizes and devices.
  • Enhanced Readability: The new font styles and spacing contribute to a more comfortable reading experience.

Component Overhaul

Many Angular Material components have received a visual and functional update to align with Material 3 principles.

Theming and Customization

Material 3 introduces a flexible theming system that empowers developers to create custom designs.

  • CSS Variables: The use of CSS variables simplifies theme customization and overrides.
  • Theme Creation: Easily create custom themes based on your brand guidelines or user preferences.
  • Component-Level Styling: Fine-tune component styles without affecting the overall theme.

Support Material 2

If you would like to understand the changes for Material 2 design with Angular Material 18, I would recommend you to read my article Updating to Angular Material 18, or simply check the breaking changes.

Next arrow_forward Development Environment