fix(datepicker): toggle should inherit color from mat-form-field (#10245)

src/demo-app/datepicker/datepicker-demo.html

@@ -14,14 +14,14 @@
   </mat-form-field>
 </p>
 <p>
-  <mat-form-field>
+  <mat-form-field color="accent">
     <mat-label>Min date</mat-label>
     <input matInput [matDatepicker]="minDatePicker" [(ngModel)]="minDate"
         [disabled]="inputDisabled">
     <mat-datepicker-toggle matSuffix [for]="minDatePicker"></mat-datepicker-toggle>
     <mat-datepicker #minDatePicker [touchUi]="touch" [disabled]="datepickerDisabled"></mat-datepicker>
   </mat-form-field>
-  <mat-form-field>
+  <mat-form-field color="accent">
     <mat-label>Max date</mat-label>
     <input matInput [matDatepicker]="maxDatePicker" [(ngModel)]="maxDate"
         [disabled]="inputDisabled">
@@ -30,7 +30,7 @@
   </mat-form-field>
 </p>
 <p>
-  <mat-form-field>
+  <mat-form-field color="accent">
     <mat-label>Start at date</mat-label>
     <input matInput [matDatepicker]="startAtPicker" [(ngModel)]="startAt"
         [disabled]="inputDisabled">

src/lib/datepicker/datepicker.md

@@ -99,6 +99,14 @@ As with other types of `<input>`, the datepicker works with `@angular/forms` dir
 
 <!-- example(datepicker-value) -->
 
+### Changing the datepicker colors
+
+The datepicker popup will automatically inherit the color palette (`primary`, `accent`, or `warn`)
+from the `mat-form-field` it is attached to. If you would like to specify a different palette for
+the popup you can do so by setting the `color` property on `mat-datepicker`.
+
+<!-- example(datepicker-color) -->
+
 ### Date validation
 
 There are three properties that add date validation to the datepicker input. The first two are the

src/lib/datepicker/datepicker.ts

@@ -153,7 +153,15 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
   @Input() startView: 'month' | 'year' = 'month';
 
   /** Color palette to use on the datepicker's calendar. */
-  @Input() color: ThemePalette;
+  @Input()
+  get color(): ThemePalette {
+    return this._color ||
+        (this._datepickerInput ? this._datepickerInput._getThemePalette() : undefined);
+  }
+  set color(value: ThemePalette) {
+    this._color = value;
+  }
+  _color: ThemePalette;
 
   /**
    * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
@@ -464,13 +472,10 @@ export class MatDatepicker<D> implements OnDestroy, CanColor {
 
   /** Passes the current theme color along to the calendar overlay. */
   private _setColor(): void {
-    const input = this._datepickerInput;
-    const color = this.color || (input ? input._getThemePalette() : undefined);
-
+    const color = this.color;
     if (this._popupComponentRef) {
       this._popupComponentRef.instance.color = color;
     }
-
     if (this._dialogRef) {
       this._dialogRef.componentInstance.color = color;
     }

src/material-examples/datepicker-color/datepicker-color-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/datepicker-color/datepicker-color-example.html

@@ -0,0 +1,13 @@
+<mat-form-field color="accent">
+  <mat-label>Inherited calendar color</mat-label>
+  <input matInput [matDatepicker]="picker1">
+  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+  <mat-datepicker #picker1></mat-datepicker>
+</mat-form-field>
+
+<mat-form-field color="accent">
+  <mat-label>Custom calendar color</mat-label>
+  <input matInput [matDatepicker]="picker2">
+  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
+  <mat-datepicker #picker2 color="primary"></mat-datepicker>
+</mat-form-field>

src/material-examples/datepicker-color/datepicker-color-example.ts

@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+/** @title Datepicker palette colors */
+@Component({
+  selector: 'datepicker-color-example',
+  templateUrl: 'datepicker-color-example.html',
+  styleUrls: ['datepicker-color-example.css'],
+})
+export class DatepickerColorExample {}