How to use Angular Material and CSS

Question

So I admit this is very close to a question that is to broad, but I think it counts as an acceptable question.

So been playing around with Angular Material, and yes it has a lot and cool stuff, and I like the idea of getting more or less a full styleguide to web layout as part of the package (have a look at http://www.google.com/design/spec/material-design/introduction.html it is worth a read)

My question is though, how do I use the pallette. I defined a palette in my java script (like the one below)

$mdThemingProvider.definePalette('Stackit', {
    "50":"#f6f7f9",
    "100":"#c9d3d9",
    "200":"#a8b8c2",
    "300":"#7d95a5",
    "400":"#6b8798",
    "500":"#5e7787",
    "600":"#516775",
    "700":"#455763",
    "800":"#384751",
    "900":"#2c373f",
    "A100":"#f6f7f9",
    "A200":"#c9d3d9",
    "A400":"#6b8798",
    "A700":"#455763",
    'contrastDefaultColor': 'dark',    // whether, by default, text         (contrast)
    // on this palette should be dark or light
    'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
        '200', '300', '400', 'A100'],
    'contrastLightColors': undefined    // could also specify this if default was 'dark'
});

So we have a pallette, and it picks up some of these colors automatically, for example, run this code and your md-toolbar will change colours.

However, there are a lot of colours in a palette, but I haven't figured out how to use them in a useful manner.

Say for example that I want my webpage to have to type of sections, one light grey with black text, one dark grey with white text, all are about half a screen size each, might have some icons or pictures, as well as some text.

So how I would do it normally would be something like

<div class=dark style="height: 350px">
    Some welcome text and saying hi
</div>
<div class=light style="height: 350px">
    A nice picture and some other bits
</div>
<div class=dark style="height: 350px">
    Now lets do something with a big button
</div>

So in Material Design I'll get the divs by setting up a layout=row and a flex, nice layout and scroll down over my zebra. However, in theory I would like to use color 100 for light and 600 for dark from my palette, but there does not seem to be a way to do so. Yes, I can create a CSS class with those colours, but it means that the whole Palette things seems rather wasteful.

Answer 1

After much faffing about, I manage to figure out part of it.

There is a md-accent option which seems to be create for this very purpose. You do need to set the accent first.

.accentPalette('grey')

In my case, I just needed the grey one, but you could define the whole palette using definePalette. So using our example above, the configuration would look as follows:

    $mdThemingProvider.theme('default')
        .dark()
        .primaryPalette('Stackit')
        .backgroundPalette('Stackit')
        .accentPalette('grey')
        .warnPalette('red');

Then all you need to do to make light (grey) text on black background:

<H1 class="md-accent">Prototypes</H1>