Change color of angular datepicker material component
22,349
Solution 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;
}
Solution 2
Use ::ng-deep
and select those element:
::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;
}
Solution 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);
![jxStackOverflow](https://lh5.googleusercontent.com/-gagkJUbMze8/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdt8ba0xvf8c1m3a8Q5bF8VS2GQZA/mo/photo.jpg?sz=256)
Author by
jxStackOverflow
Updated on January 17, 2022Comments
-
jxStackOverflow over 2 years
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>