Wrong color for select options

[AlanCrevon]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Font color for unselected options in should be black on light theme.

What is the current behavior?

Font color for unselected options in is white on light theme.

What are the steps to reproduce?

@import '~@angular/material/_theming.scss';

@include mat-core();
$primary: mat-palette($mat-cyan, 700, A100, A400);
$accent:  mat-palette($mat-red, 700, A100, A400);
$warn:    mat-palette($mat-orange);

$dark-theme : mat-dark-theme($primary, $accent, $warn);
$light-theme : mat-light-theme($primary, $accent, $warn);

@include mat-core-theme($dark-theme);
@include mat-autocomplete-theme($light-theme);
@include mat-button-theme($light-theme);
@include mat-button-toggle-theme($light-theme);
@include mat-card-theme($light-theme);
@include mat-checkbox-theme($light-theme);
@include mat-chips-theme($light-theme);
@include mat-dialog-theme($light-theme);
@include mat-grid-list-theme($light-theme);
@include mat-icon-theme($light-theme);
@include mat-input-theme($light-theme);
@include mat-list-theme($dark-theme);
@include mat-menu-theme($light-theme);
@include mat-progress-bar-theme($light-theme);
@include mat-progress-spinner-theme($light-theme);
@include mat-radio-theme($light-theme);
@include mat-select-theme($light-theme);
@include mat-sidenav-theme($light-theme);
@include mat-slide-toggle-theme($light-theme);
@include mat-slider-theme($light-theme);
@include mat-tabs-theme($dark-theme);
@include mat-toolbar-theme($light-theme);
@include mat-tooltip-theme($light-theme);
@include mat-datepicker-theme($light-theme); 

What is the use-case or motivation for changing an existing behavior?

Mixing light and dark theme elements t

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.1, material@2.0.0-beta.5-e4c7601

Is there anything else we should know?

I get this result :

if in @angular/material/_theming.css, in mat-select-theme() I modify from :

.mat-select-content, .mat-select-panel-done-animating {
    background: mat-color($background, card);
}

to

.mat-select-content, .mat-select-panel-done-animating {
    background: mat-color($background, card);

    .mat-option {
      color : mat-color($foreground, text);
    }
  }

but i'm not sure it's the right fix.

Cheers.
alan

[crisbeto]

This should've been fixed by #4568.

[AlanCrevon]

@crisbeto : Confirmed. I'm closing the issue. :)

I reinstalled material2, it fixed the pb. Don't know why a nom update didn't. Something could be wrong with my nom :/

[crisbeto]

The changes from #4568 haven't been released yet. You can still get them by installing the latest master build:

npm install https://github.com/angular/material2-builds.git

[AlanCrevon]

I took a fresh start, uninstalled material2, double checked my local modification were gone, reinstall from master as @crisbeto suggested, and i'm sorry, i have to reopen this issus. Problem not solved. :(

[AlanCrevon]

Hooo... i see, now. My theme file didn't @include mat-option-theme($light-theme).

Ok, so it used to work for a bad reason, then it stopped working for a good reason, and now it works for a good reason. :D

[crisbeto]

That still sounds a little weird @AlanCrevon. The mat-option-theme should be included as a part of the mat-core-theme (which you have in your example).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}