I need to set custom color as primary in Angular Material. Reading some theaming guides and SO answers like Changing Primary Color in Angular Material 2 shows that I need to pick color from predefined set of colors. Can I use custom value?
Add a comment
|
1 Answer
You can use any color you want, but it must be defined in your own custom 'palette' in order to be used in theming. Have a look at the Angular Material palettes for examples. You would then use your palette in place of the material palettes like $mat-blue when you create your theme:
$my-blue: (
50: #e3f2fd,
...
)
...
$primary: mat-palette($my-blue);
...
$theme: mat-light-theme($primary, $accent);
Search the web for angular material palette tool or similar. There are a number of free online tools for creating palettes from a base color.
5 Comments
Antoniossss
How do I know how to map colors? Eg should i use 50,100 or 200 ?
G. Tranter
You need to do some research if you don't know that. You should define all of them: 50-900, plus the 'A's, and the contrasts. As I said - find an online tool to make life easier, or simply copy one the the Angular Material ones and change the values to your color. Keep in mind that a palette represents varying shades of a single color, plus contrasts colors used to display text over the corresponding palette color (so contrasts are typically white, black, or grey and not colored).
Antoniossss
Thats the thing, I would like to skip whole palette creation but it looks like I cannot. Thanks for answer.
G. Tranter
Yes - that's right - you need your own palette unless the color you want is already in one of the Angular Material palettes.
Jack
@G.Tranter Thanks, voted up. I think it is enough just generate scss file and use it in our project, is that true?