fix(material-experimental/mdc-form-field): native select option blending in with background on dark themes (#19232)

On dark themes the `color` of the native `select` inside of an MDC-based form field is usually set to some shade of white. The problem is that the color of the native `select` dropdown preserves its white background, making the text invisible. These changes make it so that the options always use a dark text color.

Author: crisbeto

src/material-experimental/mdc-form-field/_form-field-native-select.scss

@@ -1,3 +1,4 @@
+@import '../../material/core/theming/theming';
 @import '../../cdk/a11y/a11y';
 
 // Width of the Material Design form-field select arrow.
@@ -88,3 +89,22 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt
     }
   }
 }
+
+@mixin _mat-form-field-native-select-theme($theme) {
+  select.mat-mdc-input-element {
+    // On dark themes we set the native `select` color to some shade of white,
+    // however the color propagates to all of the `option` elements, which are
+    // always on a white background inside the dropdown, causing them to blend in.
+    // Since we can't change background of the dropdown, we need to explicitly
+    // reset the color of the options to something dark.
+    @if (map-get($theme, is-dark)) {
+      option {
+        color: $dark-primary-text;
+      }
+
+      option:disabled {
+        color: $dark-disabled-text;
+      }
+    }
+  }
+}

src/material-experimental/mdc-form-field/_form-field-theme.scss

@@ -5,6 +5,7 @@
 @import '../mdc-helpers/mdc-helpers';
 @import 'form-field-subscript';
 @import 'form-field-focus-overlay';
+@import 'form-field-native-select';
 @import 'mdc-text-field-theme-variable-refresh';
 
 // Mixin that overwrites the default MDC text-field color styles to be based on
@@ -40,6 +41,7 @@
       @include mdc-line-ripple-core-styles($query: $mat-theme-styles-query);
       @include _mat-form-field-subscript-theme();
       @include _mat-form-field-focus-overlay-theme();
+      @include _mat-form-field-native-select-theme($theme);
 
       .mat-mdc-form-field.mat-accent {
         @include _mdc-text-field-color-styles(secondary);