Change color of matInput

You can use plain css

 ::ng-deep .mat-focused .mat-form-field-label {
  /*change color of label*/
  color: green !important;
 }

 ::ng-deep.mat-form-field-underline {
  /*change color of underline*/
  background-color: green !important;
} 

::ng-deep.mat-form-field-ripple {
 /*change color of underline when focused*/
 background-color: green !important;
}

or create custom theme to apply on.Here is article,how to create custom themes

https://alligator.io/angular/angular-material-custom-theme/

If you are using material theming you can use accent or primary, just add color property in mat-form-field:

<mat-form-field class="example-full-width" color="accent">
   <input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>

If you put the form inside a div and give it a class then use ::ng-deep className {...} you wont override all the "mat-form-field" in the application.

::ng-deep .create-account-form {
  .mat-focused .mat-form-field-ripple {
    /*change color of underline when focused*/
    background-color: @color-blue !important;
  }
  .mat-focused .mat-form-field-label {
    /*change color of label when focused*/
    color: @color-blue !important;
   }
}

<form class="create-account-form">
      <mat-form-field class="input-size">
        <input type="email" mdInput formControlName="email" placeholder="Email" required matInput>
      </mat-form-field>
</form>

Simply assign color to these classes

    .mat-focused .mat-form-field-label {
      /*change color of label*/
      color: white !important;
     }
    
     .mat-form-field-underline {
      /*change color of underline*/
      background-color: white !important;
    } 
    
    .mat-form-field-ripple {
     /*change color of underline when focused*/
     background-color: white !important;;
    }

There are two classes, .mat-form-field-label for the text label and .mat-form-field-underline for the underline. Override these two classes by giving them desired styles.

Here is a working link

https://stackblitz.com/edit/angular-nhvrog-zexty5?file=styles.css

Thanks.

The simplest solution is to use the pre built material directive

<mat-form-field appearance="legacy">

In addition to this good answer https://stackoverflow.com/a/69040241/19530488, this is how i change the color of the 'border' of mat-form-field with outline appearance:

.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
  color: lightblue !important;
}