Revision history [back]

Angular Material 15 uses CSS variables to define various properties such as colors, fonts, and sizes. To replace these variables, follow the steps below:

1. Open your project's styles.scss file.

2. Import the Angular Material theme file using the @import statement. For example:

   @import '~@angular/material/prebuilt-themes/indigo-pink.css';
   

3. Define a new variable to replace the existing one. For example, to change the primary color, define a new variable called primary-color:

   $primary-color: #2196f3;
   

4. Use the new variable in your styles instead of the default Angular Material variable. For example:

   .my-button {
    background-color: $primary-color;
   }
   

5. Repeat steps 3 and 4 for any other variables you wish to replace.

Note: It is important to define your custom variables after importing the Angular Material theme file to ensure that they override the default variables.