Currently, I am utilizing the dark theme in angular-material 1.0.4. The appearance of the select element is different when an item is selected:
https://i.sstatic.net/FRU0r.png
Comparatively, this is how it appears with the default theme applied:
https://i.sstatic.net/3fn1M.png
The dark theme fails to handle color effectively. How can I modify the background color of the selected item (shown as light grey in the images) or alter the text color of the item?
I solely employ the default CSS:
<link rel="stylesheet" href="lib/angular-material/angular-material.css">
This is the setup of the select element:
<md-input-container flex="30">
<label>Branch</label>
<md-select ng-model="selectedBranch">
<md-option ng-repeat="b in branches" value="{{b.id}}">
{{b.name}}
</md-option>
</md-select>
</md-input-container>
Below is how I initialize the dark theme:
app.config(function ($mdThemingProvider) {
$mdThemingProvider.theme('default')
.dark()
.primaryPalette('orange')
.accentPalette('yellow')
.warnPalette('deep-orange');
});
REMARK: Simply changing the color on mouse hover does not solve the issue, as keyboard selection is also possible.
UPDATE: Ultimately, determining that the event responsible for coloring the text is "focus" resolved the problem.