Changing border color in mat-form-field

Question

I am using angular material mat-form-field. I have a dark background, and therefore am trying to change the border of the form-field to white. But I am not able

Answer 1

SCSS version of @sasa with colors as variables

::ng-deep {
   $custom-main-color: red;
   $custom-label-color: rgba(0, 0, 0, .6);

   // mat-icon-stepper selected color change
   .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
      background-color: $custom-main-color !important;
   }

   // input outline color
   .mat-form-field-appearance-outline .mat-form-field-outline {
      color: $custom-main-color !important;
   }

   // mat-input focused color
   .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
      color: $custom-main-color !important;
   }

   // mat-input error outline color
   .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
      color: $custom-main-color !important;
      opacity: 0.8 !important;
   }

   // mat-input caret color
   .mat-input-element {
      caret-color: $custom-main-color !important;
   }

   // mat-input error caret color
   .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
      caret-color: $custom-main-color !important;
   }

   // mat-label normal state style
   .mat-form-field-label {
      color: $custom-label-color !important;
   }

   // mat-label focused style
   .mat-form-field.mat-focused .mat-form-field-label {
      color: $custom-main-color !important;
   }

   // mat-label error style
   .mat-form-field.mat-form-field-invalid .mat-form-field-label {
      color: $custom-main-color !important;
   }
}