what's use-system-variables in angular material

ONLINECAST

2 min read

·

04-10-2024

11

0

Share

Unleashing the Power of use-system-variables in Angular Material

Angular Material provides a robust and customizable design system for building beautiful and functional web applications. A key aspect of its customization lies in its use of system variables. But what exactly are these variables and how can we leverage them effectively?

Imagine you want to change the default color palette used throughout your Angular Material project. Maybe you want a more vibrant blue instead of the standard blue-grey. This is where use-system-variables comes into play.

Let's break it down:

The Scenario:

You're using the standard Angular Material theme, but you need to customize the primary color to a brighter blue.

Original Code (Without use-system-variables)

<mat-toolbar color="primary">
  <span>My Angular Material App</span>
</mat-toolbar>

The Problem:

Hardcoding the color directly in the HTML (color="primary") makes it difficult to apply the same color consistently across your application. Additionally, if you want to change the primary color later, you'll have to modify each element individually.

Introducing use-system-variables

Angular Material provides a convenient way to manage and override its default variables. This is done through the use-system-variables directive:

<mat-toolbar [ngStyle]="{ backgroundColor: '$mat-primary' }">
  <span>My Angular Material App</span>
</mat-toolbar>

Explanation:

• [ngStyle] directive: This directive dynamically binds styles to the element based on the provided object.
• $mat-primary: This represents the Angular Material primary color variable.
• No Hardcoded Color: We are no longer specifying the color directly, but rather referencing the variable.

Benefits:

• Consistent Styling: By using system variables, you ensure all elements using the $mat-primary variable consistently adopt the same color.
• Easy Customization: You can easily modify the primary color by simply changing the value of the $mat-primary variable in your theme file.
• Global Applicability: System variables can be used for other aspects of the theme, such as secondary color, font families, spacing, and more.

Implementation:

1. Create a Custom Theme: Start by creating a custom theme file. For instance, create a file called my-theme.scss within your src/styles folder.

2. Import Angular Material's Theme: Import the Angular Material theme to your custom theme file.

@import '~@angular/material/theming';

// Include the default Angular Material theme.
@include mat-core();

// Define a custom theme with a brighter blue primary color.
$my-primary: #007bff;

// Override the default theme with your custom theme.
$my-theme: mat-light-theme($my-primary);

@include angular-material-theme($my-theme);

3. Import your Custom Theme: In your angular.json file, add the following to the styles section:

"styles": [
  "src/styles.scss",
  "src/themes/my-theme.scss"
]

4. Apply System Variables: Now you can apply the system variables in your components using [ngStyle] or other styling mechanisms as shown in the earlier example.

Going Further:

Explore the full range of Angular Material system variables and customize your theme extensively. You can find a complete list of available variables in the official Angular Material documentation: https://material.angular.io/guide/theming

In Conclusion:

use-system-variables offers a powerful and efficient method for customizing Angular Material themes. By leveraging this feature, you can create a cohesive and visually appealing design while maintaining a high level of flexibility for future adjustments.