Change inline colors

Question

I just want to ask how to change these inline colors in Angular 2 stuff.

It is indicated in the docs of the ng2 material: color: "primary"|"accent"|"warn"

How to change colors in these palettes? Or even how simple it is to change this blue text color?

I tried this and it does not work.

 md-input: { color: black; border-color: black } 

Answer 1

I found this on Angular2 Material github page

Angular Material Home Page

Suppose you are using Angular-CLI

Color palette - to select the colors you want to use and their shades, for example brown = $ md -brown then select a shade like 800.

1. ) First create a ./src/forest-theme.scss file (no matter what name you want)

 @import ' ~@angular /material/core/theming/all-theme'; @include md-core(); $forest-app-primary: md-palette($md-brown, 800); // Brown <-- CUSTOM COLOR HERE! $forest-app-accent: md-palette($md-green, A400); // Green <-- CUSTOM COLOR HERE! $forest-app-warn: md-palette($md-deep-orange, 500); // Orange <-- CUSTOM COLOR HERE! $forest-app-theme: md-light-theme($forest-app-primary, $forest-app-accent, $forest-app-warn); @include angular-material-theme($forest-app-theme); 

2. ) Next: add a new entry to the stylesheet in angular-cli.json pointing to the theme file (for example, forest-theme.scss).

angular-cli.json

 { "project": { "version": "blah", "name": "my_forest_app" }, "apps": [ { "styles": [ "styles.css", "forest-theme.scss" ] } ], } 

3. ) Then in your component you can do something like this

 import {Component} from '@angular/core'; @Component({ selector: 'my-app', template: ` <md-toolbar color="primary"> <span>Forest Application Title</span> </md-toolbar> <br/> <div> <h2>Hello {{name}}</h2> <button md-raised-button color="primary">Forest PRIMARY</button> <button md-raised-button color="accent">Forest ACCENT</button> <button md-raised-button color="warn">Forest WARN</button> <br> <br> <md-input color="primary" placeholder="Primary Search"></md-input> </div> `, }) export class App { name:string; constructor() { this.name = 'Angular2 Material' } } 

That should do it, any questions this page should answer them

Update

Angular Material has its own website with lots of guides.

Answer 2

The answer given by @Logan H was right, but outdated.

These are the new links for:

• Cross your angular 2 Github material project.

• Thematic project angular 2 Official documentation site .

The steps are the same as @Logan H said in his answer:

• Create a file (theme.scss) in the src / folder of your angular 2 project
• Add the file name to the stylesheet specified in angular-cli.json or .angular-cli.json, depending on your version of the ng project:

.angular-cli.json

 "styles": [ "styles.less", "theme.default.scss" ] 

Src / theme.scss

 //CHOOSE ONE, depending on your version, check UPDATE at the end @import ' ~@angular /material/core/theming/all-theme'; @import ' ~@angular /material/theming'; // Plus imports for other components in your app. // Include the base styles for Angular Material core. We include this here // so that you only // have to load a single css file for Angular Material in your app. @include mat-core(); // Define the palettes for your theme using the Material Design palettes // available in palette.scss // (imported above). For each palette, you can optionally specify a default, // lighter, and darker // hue. $app-default: mat-palette($mat-indigo); $app-default-accent: mat-palette($mat-pink, A200, A100, A400); // The warn palette is optional (defaults to red). $app-default-warn: mat-palette($mat-red); // Create the theme object (a Sass map containing all of the palettes). $app-default-theme: mat-light-theme($app-default, $app-default-accent, $app- default-warn); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each // component // that you are using. @include angular-material-theme($app-default-theme); 

The comments explain where to find a set of colors and options to choose from. pallette.scss (\ node_modules \ @angular \ material \ core \ theming_palette.scss)

UPDATE

In the latest version of angular material 2 (beta 3), some paths have changed, see here.

Violation of changes:

• A new way to import a palette or to create your own theme. The path changes in src / theme.scss from @import '~ @ angular / material / core / theming / all-theme'; to @import '~ @ angular / material / theming'; The same thing happens if you simply import a pre-created theme, a new path for the amber theme @import '~ @ angular / material / -binary installation theme / DeepPurple -amber.css';

• Since the material of 2 Beta 3 depends on angular 4 (Angular latest version), we need to import an animation module from BrowserAnimationsModule or NoopAnimationsModule into our main module, and I quote:

Now that the animation has been reorganized into a separate package, users of @ angular / material need to explicitly import the BrowserAnimationsModule (or NoopAnimationsModule) from the @ angular / browser package / animation, as well as installing @ angular / animation.