Differntiate inside single theme.

[SanderElias]

I need to build an app that needs to be in one color-scheme. What I mean by this, I can only set the theme once, on the highest level. Inside my app, I need a way to differentiate my elements.

I looked for some styles like this:
md-warn
md-danger
md-primary
md-secondary
md-error
md-success

But I could not find those! Found quite some nice things while reading trough the material css and scss files, but somehow I seemed to have missed out on these!

Als0 it would be nice to have access to the color palette as defined in the design spec. It would be really handy to have things like this:

md-color-50, md-color-100 etc,
where both the color and the background color, would be set as in the color palette.

[WillsB3]

If you use the new theming system in the latest release you can use the SASSs map-get function to retrieve a colour variant for your current colour scheme. There are more details here

[SanderElias]

@WillsB3, I know. But that would require me to recompile the sass. I don't mind doing that, but it is something that needs to be available to every MD-user. (as far as I know, the SASS map-get is not available in the browser!)

[ajoslin]

Feel free to use different themes on different elements. For example, use md-theme="amber" and set 'md-primary' if you want an amber button.

[SanderElias]

That's not what I meant. A theme is meant to style an application. Not to convey meaning.
You need to differentiate within a single color theme. If your app is running for different customers, those customers all want their own color-theme. But within such an app, you sometimes need convey meaning to the end-user (where the end-user is a customer of the customer!).
That means that on a given point, you don't know what the theme is that's chosen, so selecting a different theme on a element might render a butt-ugly result.

[plato-cambrian]

+1 for attributes or classes for setting shade, perhaps .md-primary-shade-50 or md-primary-shade="50".

I've always just set my own classes for highlight colors, but I could see the utility with md-warn md-danger md-error md-success defaults, even if they just copy bootstrap's.

See also #521

---

edit: as you say

That means that on a given point, you don't know what the theme is that's chosen, so selecting a different theme on a element might render a butt-ugly result.

which is an argument against default highlight colors

[SanderElias]

Ok, I'm working toward an (partial) solution on this. If anybody want to pick this up, drop me a note, so we can work together on this.
It's a bit more involved then it looks at the first eye. But I'm well on my way.

[WillsB3]

@SanderElias Nice. Can you perhaps share your thinking and your planned approach here?

[SanderElias]

Sure, I'm largely done, just have to leave in a while, perhaps I can finish up on Monday.
step 1, adapt the scss, so the colors are exposed to begin with. (done)
step 2, write a js-helper to make a dynamic style-sheet so the colors of the
selected theme are available under generic names. (mostly done)

you need 2, because a application might switch themes during runtime.

[WillsB3]

Isn't step 2 covered by angular-materials built in md-theme-watch directive?

Please excuse me if I'm getting confused here 👍

[SanderElias]

@WillsB3 No, if you want to have an generic class like md-fg-color-50, that needs to be adapted when you switch to a different theme.

I have an working version now. It needs to be hooked up into the ng-material, overthinking what the best way is, to do just that.

[plato-cambrian]

@SanderElias @rschmukler my first thought is:

//jade syntax:
body(md-theme="pink")
  h1.md-fg-color-50 This H1 should be pink
  div(md-theme="light-blue")
    h2.md-fg-color-50 This H2 should be blue

//css
*[md-theme="light-blue"] .md-fg-color-50 {
  color: #03a9f4;
}

*[md-theme="light-blue"] .md-fg-color-60 {
  color: #039be5;
}

*[md-theme="pink"] .md-fg-color-50 {
  color: #e91e63;
}

*[md-theme="pink"] .md-fg-color-60 {
  color: #d81b60;
}

This fails with nested themes, depending on the order of the CSS rules in the source.
I don't know the CSS cascade well enough to propose an alternative.
In case any CSS wizards have solutions,

Here's a fiddle with this code