color="primary" does not work

[dolanmiu]

Bug, feature request, or proposal:

Bug

What is the current behavior?

primary accent warn colors don't work. Shows up as grey.

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

"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/material": "^2.0.0-alpha.9-3",

I am using electron too

I have my code here:

<button md-raised-button color="primary">PRIMARY</button>
<button md-raised-button color="accent">ACCENT</button>
<button md-raised-button color="warn">WARN</button>

but it shows up as:

I am including core.css, overlay.css and material.indigo-pink.min.css in index.html:

    <link href="https://unpkg.com/@angular2-material/core/overlay/overlay.css" rel="stylesheet">
    <link href="https://unpkg.com/@angular2-material/core/style/core.css" rel="stylesheet">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">

Note

material.indigo-pink.min.css is definately loaded because some parts of my app turned pink, as shown in the screen shot.

[jelbourn]

@dolanmiu you've confused this project with Material Design Lite, which is something else completely.

Follow our theming guide for how to bring the colors into your app.

[dolanmiu]

Quoted straight from the docs:

Using a pre-built theme

Angular Material comes prepackaged with several pre-built theme css files. These theme files also include all of the styles for core (styles common to all components), so you only have to include a single css file for Angular Material in your app.

You can include a theme file directly into your application from @angular/material/core/theming/prebuilt

If you're using Angular CLI, this is as simple as including one line in your style.css file:

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

This is exactly what I have done (but using <link> instead). But it isn't working?

Please help

[jelbourn]

You are including the css file from Material Design Lite, not Angular Material. The correct file is in the @angular/material npm package.

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