CSS Creating an Angular Material Theme with CSS Variables

In this article, we’ll learn how to use CSS variables to create a custom Angular Material theme. Angular Material is a popular UI component library that provides a collection of ready-made components for building modern web applications. You can use CSS variables to easily modify the colors, fonts, and other style properties of an Angular Material theme to suit the design needs of different projects.

Read more: CSS Tutorial

What are CSS variables?

CSS variables, also known as custom properties, are variables defined in CSS. They start with a “-” followed by a name and can contain any valid CSS value. By using the var() function, we can reference these variables in any CSS property.

Here is a simple example showing how to define and use CSS Variables:

:root {
--primary-color: #007bff;
}

.button {
background-color: var(--primary-color);
color: white;
}

In this example, we define a CSS variable called --primary-color and use it in the background-color property of the .button class. This allows us to easily change the value of --primary-color to change the background color of the button.

Customizing the Angular Material Theme with CSS Variables

To customize the Angular Material theme using CSS variables, we first need to import CSS variables into our application. In an Angular application, we define these variables in the styles.scss file. Here’s an example:

@import '~@angular/material/theming'; 
@import './app-theme'; 

@include mat-core(); 

<span class="katex math inline">my-app-theme: (
primary: var(--primary-color),
accent: var(--accent-color),
warn: var(--warn-color),
); 

@include angular-material-theme(</span>my-app-theme); 

In the example above, we first import the Angular Material theme file and the core styles of the Material components using @include mat-core() . Then, we define a variable called $my-app-theme and set it to an object containing our custom colors.

In the application’s style sheet (e.g., app-theme.scss), we can define these color CSS variables. Here’s an example:

:root {
--primary-color: #007bff;
--accent-color: #ffc107;
--warn-color: #dc3545;
}

In the example above, we define three CSS variables using the :root selector: --primary-color, --accent-color, and --warn-color. We can freely modify the values ​​of these variables as needed to change the theme of the entire application.

Example: Customizing Button Colors

Suppose we want to customize the button colors in Angular Material. We can do this by modifying the primary property in the $my-app-theme object.

First, in the styles.scss file, modify the primary property of the $my-app-theme object:

$my-app-theme: (
primary: var(--my-custom-primary-color),
accent: var(--accent-color),
warn: var(--warn-color),
); 

Then, in the app-theme.scss file, define a CSS variable named --my-custom-primary-color and set it to the desired color:

:root {
--my-custom-primary-color: #ff5722; 
}

With the above changes, we’ve successfully changed the button’s theme color to orange.

Example: Custom Fonts

Another common customization is changing the font in an Angular Material theme. We can do this by modifying the typography property in the $my-app-theme object.

First, in the styles.scss file, modify the typography property in the $my-app-theme object:

$my-app-theme: ( 
primary: var(--primary-color), 
accent: var(--accent-color), 
warn: var(--warn-color), 
typography: mat-typography-config( 
$my-custom-font-family, 
$my-custom-font-size 
), 
); 

Then, in the app-theme.scss file, define a CSS called --my-custom-font-family and --my-custom-font-size Variables and set them to our desired values:

:root {
--my-custom-font-family: "Arial", sans-serif;
--my-custom-font-size: 14px;
}

With the above modifications, we’ve successfully changed the font in the Angular Material theme to Arial and set the font size to 14px.

Summary

By using CSS variables, we can easily customize the colors, fonts, and other style properties of an Angular Material theme. We simply define these variables in our application’s style files and reference them in our Angular Material theme. This approach allows us to easily adapt our design to the needs of different projects and improve the user experience.

We hope this article has helped you learn how to create Angular Material themes using CSS variables!