1.1.0-rc1 seems to break .dark themes

[geimkisi]

You can see it in the first "Basic Usage" input demo
https://material.angularjs.org/latest/demo/input
The top is supposed to be grey and the 2 first inputs cant be seen because they are white.

[devversion]

Indeed, thanks for tracking the issue.

@EladBezalel Since when is md-content white, when using a dark theme?

[EladBezalel]

@geimkisi @devversion This issue is caused by #7422, this PRwe was suggested because we didn't wanted to have background color on md-content.

There are two possible solutions here:

1. Set a background color not from the there on this container
2. Create a theming directive that will parse the color the same way as we do on our themes:

<div md-background="background-700-0.29"></div>

@ThomasBurleson thoughts?

[topherfangio]

@EladBezalel In general, I think the background should be set by our components. For instance, md-whiteframe, <md-card> and <md-dialog> should all have the same colors of either #FFFFFF for light themes or #424242 for dark themes.

The case of the background is tricky since it should be done at the body/app-level, and you shouldn't be mixing themes within the app itself. So, I think in this case, we're simply doing something in our docs that goes against the spec (please correct/link me if you find a reference in the official spec of both light and dark themes being used on the same screen).

Perhaps instead of showing the dark theme here, we should have a dropdown that lets you toggle the entire site between light and dark? This may help us catch other issues with dark themes as well...

[EladBezalel]

@topherfangio I agree with you,
There's no such mixing of theme's in the spec.

Also a menu that changes the docs color can be cool but how would you change all the constant colors from the css that was chosen for light theme?

[andre-morassut]

@EladBezalel @topherfangio
My 2 cents : If you choose to forbid (or not support) this kind of mixing, it would be great to keep an example in the demos that would show how to have different background colors in a form, like this (taken from the specs) :

This kind of layout is very useful for business applications. It makes stand out the important parts of a form (which is a different notion from simply required/not required).

Would it be possible?

[EladBezalel]

As you can see in the picture you posted, the color of the header is the primary color (indigo),
to achieve this kind of look you can use md-toolbar with md-tall class

[andre-morassut]

Sorry if I was not clear enough in my precedent comment.

My question was not about reproducing the exact look of the screenshot (I'm aware that it includes a toolbar) but about the possibility of keeping the first "basic usage" input demo as it is (i.e. with two parts having different backgrounds).

If mixing themes is forbidden, reworking the example to demonstrate how to have different backgrounds colors (taken from the same theme) in a form would be great.

[EladBezalel]

@andre-morassut couldn't agree more, thanks!

[Phr33d0m]

Hi, I'm facing this issue as well. Reading through your comments I went through the official specs and the only thing I found was: To promote greater consistency between apps, light and dark themes are available to choose from.

It does not state that we should avoid mixing both themes as per my understanding so it's use should be allowed IMHO as it has been until now.

Regards.

[EladBezalel]

@Phr33d0m i think choose from is referred to the option of choosing dark or white.

[andre-morassut]

I also think this sentence means that you should be able to choose between dark or light theme on a global basis for a given application. A "theme" is implictly a global notion.

Having a way to mix several background/foreground colors from the same theme is, IMHO, the solution to let developers fine tune the look of their applications.