fix(select): options panel theme supports dark mode

Fixes #3379.

src/components/select/demoSelectedText/index.html

@@ -1,15 +1,13 @@
 <div ng-controller="SelectedTextController" class="md-padding" ng-cloak>
-  <div>
-    <h1 class="md-title">Pick an item below</h1>
-    <div layout="row">
-      <md-input-container>
-        <label>Items</label>
-        <md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
-          <md-optgroup label="items">
-            <md-option ng-value="item" ng-repeat="item in items">Item {{item}}</md-option>
-          </md-optgroup>
-        </md-select>
-      </md-input-container>
-    </div>
+  <h1 class="md-title">Pick an item below</h1>
+  <div layout="row">
+    <md-input-container>
+      <label>Items</label>
+      <md-select ng-model="selectedItem" md-selected-text="getSelectedText()">
+        <md-optgroup label="items">
+          <md-option ng-repeat="item in items" ng-value="item">Item {{item}}</md-option>
+        </md-optgroup>
+      </md-select>
+    </md-input-container>
   </div>
 </div>

src/components/select/demoSelectedText/script.js

@@ -1,13 +1,14 @@
 angular
-    .module('selectDemoSelectedText', ['ngMaterial'])
-    .controller('SelectedTextController', function($scope) {
-      $scope.items = [1, 2, 3, 4, 5, 6, 7];
-      $scope.selectedItem;
-      $scope.getSelectedText = function() {
-        if ($scope.selectedItem !== undefined) {
-          return "You have selected: Item " + $scope.selectedItem;
-        } else {
-          return "Please select an item";
-        }
-      };
-    });
+  .module('selectDemoSelectedText', ['ngMaterial'])
+  .controller('SelectedTextController', function ($scope) {
+    $scope.items = [1, 2, 3, 4, 5, 6, 7];
+    $scope.selectedItem = undefined;
+
+    $scope.getSelectedText = function () {
+      if ($scope.selectedItem !== undefined) {
+        return "You have selected: Item " + $scope.selectedItem;
+      } else {
+        return "Please select an item";
+      }
+    };
+  });

src/components/select/select-theme.scss

@@ -116,25 +116,25 @@ md-select.md-THEME_NAME-theme {
 
 md-select-menu.md-THEME_NAME-theme {
   md-content {
-    background: '{{background-A100}}';
+    background-color: '{{background-hue-1}}';
 
     md-optgroup {
-      color: '{{background-600-0.87}}';
+      color: '{{foreground-2}}';
     }
 
     md-option {
-      color: '{{background-900-0.87}}';
+      color: '{{foreground-1}}';
 
       &[disabled] {
         .md-text {
-          color: '{{background-400-0.87}}';
+          color: '{{foreground-3}}';
         }
       }
 
       &:not([disabled]) {
         &:focus,
         &:hover {
-          background: '{{background-200}}'
+          background-color: '{{background-500-0.18}}'
         }
       }
 
@@ -158,6 +158,6 @@ md-select-menu.md-THEME_NAME-theme {
   @include checkbox-primary('[selected]');
 
   md-option .md-text {
-    color: '{{background-900-0.87}}';
+    color: '{{foreground-1}}';
   }
 }