Changing from a default theme to a custom theme removes cursor from MatInput, Angular 6

Question

I wanted to change from a default Angular Material color scheme to a custom one. My problem is, when I did, the MatInput field stopped showing the blinking cursor when in focus. I was wondering how I could get it back to showing a blinking state when clicked on.

File theme.scss

@import '~@angular/material/theming';
@include mat-core();

$my-app-primary: mat-palette($mat-grey, 100);
$my-app-accent:  mat-palette($mat-blue, 200);
$my-app-warn:    mat-palette($mat-deep-orange);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
@include angular-material-theme($my-app-theme);

File custody.component.html

 <mat-form-field>
      <input
        matInput
        type="email"
        formControlName="email"
        placeholder="{{ email }}"
        style="outline: none"
      />
      <mat-error *ngIf="form.get('email').invalid"
        >Please enter a valid email.</mat-error
      >
    </mat-form-field>

Answer 1

Angular Material Design works with palettes for primary, accent (AKA secondary) and warn colors. Those are the palettes that you can define in your custom theme. Each palette has a range of color variants (represented by numbers, 'A' followed by numbers, or simply 'darker' or 'lighter') that represent a different color tone.

So let's get direct to the point: the color variant that you picked for the primary color is:

$my-app-primary: mat-palette($mat-grey, 100);

The primary color is used a lot in Angular Material components, and it's the case too for matInput. The variant you picked (100) is too light, as the colors given by numbers ranges from 50 (lighter) to 900 (darker), so you probably won't see it in the screen. Choose a different variant and test if they give you the color that you want.

More information about palettes and design colors on Angular Material can be found in: The color system