From 7b78232650b07f18c0b0a35ea5200121bc3e3190 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 19 Sep 2018 22:41:44 +0200
Subject: [PATCH] fix(form-field): native select options blending in with
 dropdown background on a dark theme

When we have a dark theme, we set the color of `select` to white which ends up propagating to the `option` elements, causing them to blend in with the background which is always white. These changes set the options explicitly to a dark color for dark themes.
---
 src/lib/input/_input-theme.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss
index 055be25d1aba..a8d08241f904 100644
--- a/src/lib/input/_input-theme.scss
+++ b/src/lib/input/_input-theme.scss
@@ -21,6 +21,21 @@
     @include input-placeholder {
       color: _mat-control-placeholder-color($theme);
     }
+
+    // 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;
+      }
+    }
   }
 
   .mat-accent .mat-input-element {