fix(datepicker): fix theme not being applied. fixes #5141

src/components/autocomplete/autocomplete-theme.scss

@@ -14,7 +14,7 @@ md-autocomplete.md-THEME_NAME-theme {
     }
   }
 }
-.md-autocomplete-suggestions-container.md-THEME_NAME-theme, {
+.md-autocomplete-suggestions-container.md-THEME_NAME-theme {
   background: '{{background-50}}';
   li {
     color: '{{background-900}}';

src/components/datepicker/calendar-theme.scss

@@ -1,13 +1,13 @@
 /** Theme styles for mdCalendar. */
 
-.md-calendar.md-THEME_NAME-theme {
-  color: '{{foreground-1}}';
+md-calendar.md-THEME_NAME-theme {
+  .md-calendar {
+    color: '{{foreground-1}}';
 
-  tr:last-child td {
-    border-bottom-color: '{{background-200}}';
+    tr:last-child td {
+      border-bottom-color: '{{background-200}}';
+    }
   }
-}
-.md-THEME_NAME-theme {
 
   .md-calendar-day-header {
     background: '{{background-hue-1}}';

src/components/datepicker/datePicker-theme.scss

@@ -2,9 +2,6 @@
 
 md-datepicker.md-THEME_NAME-theme {
   background: '{{background-color}}';
-}
-
-.md-THEME_NAME-theme {
 
   .md-datepicker-input {
     @include input-placeholder-color('{{foreground-3}}');
@@ -24,10 +21,6 @@ md-datepicker.md-THEME_NAME-theme {
     }
   }
 
-  .md-datepicker-calendar-pane {
-    border-color: '{{background-300}}';
-  }
-
   .md-datepicker-triangle-button {
     .md-datepicker-expand-triangle {
       border-top-color: '{{foreground-3}}';
@@ -39,14 +32,19 @@ md-datepicker.md-THEME_NAME-theme {
   }
 
   // Open state for all of the elements of the picker.
-  .md-datepicker-open {
+  &.md-datepicker-open {
     .md-datepicker-calendar-icon {
       fill: '{{primary-500}}';
     }
   }
+}
+
+.md-datepicker-calendar-pane.md-THEME_NAME-theme {
+  border-color: '{{background-300}}';
 
   .md-datepicker-calendar,
   .md-datepicker-input-mask-opaque {
     background: '{{background-color}}';
   }
 }
+

src/components/datepicker/datePicker.js

@@ -213,6 +213,7 @@
     this.calendarPane.id = 'md-date-pane' + $mdUtil.nextUid();
 
     $mdTheming($element);
+    $mdTheming(angular.element(this.calendarPane));
 
     /** Pre-bound click handler is saved so that the event listener can be removed. */
     this.bodyClickHandler = angular.bind(this, this.handleBodyClick);