Change color of angular datepicker material component

Question

I am working on a angular material datepicker which will be on a black background. How do I change change the default color of the datepicker's icon, underline and placeholder text to all white color?

<mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Answer 1

You can use ::ng-deep. Here is the working example https://stackblitz.com/edit/angular-mat-datepicker-qj73og

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

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

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

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


mat-datepicker-toggle {
 color: white !important;
}

Answer 2

Use ::ng-deep and select those element:

See working example

::ng-deep datepicker-value-example .mat-form-field-label{
   color:red;
}

::ng-deep .mat-datepicker-toggle{
   color:red;
}
::ng-deep .mat-form-field-underline{
background: red;
}

Answer 3

Just follow this guide: https://material.angular.io/guide/theming#theming-only-certain-components.

You can do something like (in some scss theme file:

@import '~@angular/material/theming';

// Just include this next line once in your application, so if you are building
// a file just to theme the datepicker, don't put it here.
@include mat-core();

// Define the datepicker theme.
$datepicker-primary: mat-palette($mat-indigo);
$datepicker-accent:  mat-palette($mat-pink, A200, A100, A400);
$datepicker-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Apply the theme to your component
@include mat-datepicker-theme($datepicker-theme);