How can CSS variables in Angular Material 15 be replaced?

edit

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.