Change color of angular datepicker material component

5
votes

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>
3
cssangulardatepickerangular-material
Use your browser debugger to find the class name of desired element. After you get the class name, you can use it to change the color. You might have to use ::ng-deep as well – Dino
::ng-deep is on the radar to be deprecated: angular.io/guide/component-styles#deprecated-deep--and-ng-deep – julianobrasil

3 Answers

9
votes

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;
}
2
votes

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);
1
votes

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;
}