Material: select: dropdown doesn't inherit dark theme

[wniehof]

There have been multiple reported issues about md-select not inheriting theme closed recently. Like this one: https://github.com/angular/material/issues/2483

However I still feel it isn't completely solved.

See this Pen:
http://codepen.io/anon/pen/KpXrMB

The dropdown always seems to inherit the background color of the default theme.

[rschmukler]

Thanks for re-opening, this is now fixed in 691dd2fa3861ece019bc3a154957f69de0aee4e0. Styling fix will come in commit to follow shortly

[sondreb]

I can verify that this is still not working, getting the latest 1.0.0-rc1 and when changing themes, with this set:

$mdThemingProvider.alwaysWatchTheme(true);

The menu that opens up on the md-select always renders with the default theme, like screenshots below:

E.g. if I do like this:
$mdThemingProvider.setDefaultTheme('dark');

Then my menu always render dark, but I obviously don't want that to happen if the user selects "Light" or another theme.

My package.json:
"angular-material": "http://github.com/angular/bower-material/tarball/master",

From my built "lib.js" (built with browserify) this is the version header:

/*!
 * Angular Material Design
 * https://github.com/angular/material
 * @license MIT
 * v1.0.0-rc1-master-325d83e
 */

I see that the signature here is different than the one here:

https://github.com/angular/material/releases/tag/v1.0.0-rc1

Is that perhaps a different build of the rc1 than the one I get from tarball/master?

[rudzikdawid]

https://material.angular.io/components/menu/overview
material2 has proper implementation: dark menu in dark theme, light menu in light theme.

But material1 always render light menu becouse:

md-menu-content.md-THEME_NAME-theme {
  background-color: '{{background-A100}}';
}

sorurce from: https://github.com/angular/material/blob/master/src/components/menu/menu-theme.scss

maybe it should be:

md-menu-content.md-THEME_NAME-theme {
    background-color: '{{background-hue-1}}';
}

and then we need change color property

md-menu-item {
    color: '{{foreground-1-0.87}}';
}

please reopen this issue

[Splaktar]

@rudzikdawid what version of AngularJS Material are you using?

I updated the CodePen for 1.1.8 and I see that the dateTheme background is being inherited by the md-select popup.

If you can reproduce the issue that you are seeing with the latest version of AngularJS Material, then please open a new issue with a CodePen reproduction so that we can investigate.

[rudzikdawid]

https://codepen.io/anon/pen/qoxORQ?editors=1010
in scenario without backgroundPalette only with .dark() we have light menu in dark theme

[Splaktar]

@rudzikdawid you should be looking at the select-theme and not the menu-theme, here: https://github.com/angular/material/blob/master/src/components/select/select-theme.scss#L117-L155

[Splaktar]

It looks like the styling fix mentioned in https://github.com/angular/material/issues/3379#issuecomment-113955600, never came. Re-opening this.

[rudzikdawid]

@Splaktar You have right
but md-select-menu has the same problem as md-menu-content
both components has background-color: '{{background-A100}}';
that's why they render white background in dark theme.

here is example with md-menu and md-select
https://codepen.io/anon/pen/qoxORQ?editors=1010

i think they should have background-color: '{{background-hue-1}}';
and color: '{{foreground-1}}'; for text ind icons

[Splaktar]

I've opened PR https://github.com/angular/material/pull/11198 to address this with md-select. Please open a new issue for md-menu, it does indeed have the same problem.

[rudzikdawid]

thanks for reopen and PR
here is issue with md-menu https://github.com/angular/material/issues/11199

[Splaktar]

Thank you!

[rudzikdawid]

@Splaktar also datepicker has similar issue
I've opened issue #11200 and PR #11201

[rudzikdawid]

I've opened PR #11230 for md-menu
it's probably last component with theme issue