Overlay incorrect text colours

[buu700]

Bug, feature request, or proposal:

Not sure whether there's a common root cause related to overlays or this is just multiple independent instances of the same type of bug, so I'm just putting it all in one ticket if that's all right.

In some cases the foreground text colour is being ignored, which is particularly noticeable with a dark theme as it leads to dark text on a dark background. The rest of my theme is being applied correctly, so I'm guessing that this is just an oversight in the relevant component stylesheets.

What is the expected behavior?

Theme text colour should be consistently applied.

What is the current behavior?

• When opening a dialog, the text colour is the same as my browser's default, rather than being set to (in this case) map-get($mat-dark-theme-foreground, text).

• When opening a select, the non-selected options have the same issue as the dialog.

What are the steps to reproduce?

Open a select or dialog.

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

Theming correctness.

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

Tested with 2.0.0-beta.3.

[kara]

Are you noticing this theme discrepancy only in overlay-based components? I see one of two things happening:

1. Are you configuring the theme class? Overlay-based components require this. See theming guide:

https://material.angular.io/guide/theming#multiple-themes-and-overlay-based-components

2. We also had a bug where some theme selectors weren't being constructed properly, which is already being tracked in Some sass selector expressions don't work when nested in a theme class #4077. Should be fixed here: fix(theming): fix broken sass expressions nested in theme classes #4145.

[buu700]

Got it, thanks, I think the select issue I ran into was probably just a symptom of #4077 and had nothing to do with being an overlay. (I'd thought it was possibly related to being an overlay because of the overlay theme class thing you mentioned, but that shouldn't be an issue here since it's my global theme that isn't being fully applied.)

That said, as far as the dialog issue, I see that src/lib/dialog/_dialog-theme.scss only sets the background property; is this a bug or by design?

Also related, is it intentional that mat-app-background doesn't set color? It seems like it should, or at least that there should be another class besides mat-sidenav-container that does so.

[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.}