Support additional colors outside primary, accent, warn

[AMNY49]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

Allow additional color pallets

What is the current behavior?

Only 3 color pallets

What is the use-case or motivation for changing an existing behavior?

Material design specifications no longer call for the use of three color states, instead offering the following recommendation

• Primary color

• Secondary color

• Surface, background, and error colors

• Alternative Colors: The Material Design color system supports alternative colors, which are colors used as alternatives to your brand’s primary and secondary colors (they constitute additional colors to your theme). Apps can use alternative colors to establish themes that distinguish different sections.

https://material.io/design/color/the-color-system.html#color-theme-creation

[gtranter]

This would be extremely valuable in applications where a brand color is used for specific components such as the main app bar but is not the primary color. When the brand color is red for example, using it as the primary theme color is problematic, since primary colored input fields look like they are in error. But a red toolbar on the other hand does not suggest an error.

[merlosy]

As regards as Material Theming, alternative colors should be supported: https://material.io/design/color/the-color-system.html#color-theme-creation (scroll down to alternative colors).

[tqle]

If you need to add alternative or custom colors, just add a class on the control itself in your template and override the color with what you need. If you are using brand colors or have some other color, just create re-usable sass variables and create custom css for your custom application. You can have multiple css classes on any control, just have to make sure you have the correct specificity. Remember, material ui is built upon html and css, so nothing is preventing you from adding custom inline style or css classes to a control to fit your needs. Also you are not limited by the material color system, so you can use any color you want - hex, rbga, hsla combinations...

[gtranter]

@tqle thanks for the suggestion, but I think the point of this issue is theming support for additional colors as well as having the base components support additional colors. Knowing how to use CSS to implement whatever colors we want in our own components is not the problem.

[odahcam]

Possibly related: #11390.

[andreElrico]

we need a success color (likely green), esp for form validations and stuff. Im fine if the material team doesnt want to use a success color design wise, but many users need a green - success color sometimes somewhere in there angular/material app. So they could implement a success color for those who need it.

[odahcam]

Sometimes we want a different thing inside our application, sometimes we need to create social media butons, in which have their own color specification, et cetera.

[vishnu-dev]

@smnbbrv Any updates on this?

[JanneHarju]

I figure out how I can make success color in Angular Material way.

1. First make your own palette
2. merge it to theme
3. make corresponding mat-class
4. use color="foo"

Here is example

$custom-collection: (
    warning :  #FFC116,
    success :  #0a630f,
    danger:    #c00000,
    contrast: (
        warning :  #000000,
        success :  #FFFFFF,
        danger:    #FFFFFF,
    )
);

$my-app-custom: mat-palette($custom-collection, custom);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); // this row your should have already in your code where you select palettes for primary, accent and warn
$my-app-theme: map_merge($my-app-theme, (custom: $my-app-custom));
$custom: map-get($my-app-theme, custom);

Then you can use $custom in your component like this

background-color: mat-color($custom, success);
color: mat-color($custom, success-contrast);

But better solution is to make mat-success-class like this

.mat-success {
    background-color: mat-color($custom, success);
    color: mat-color($custom, success-contrast);
  }

Then you can use color directive like this

<button mat-flat-button color="success" >Success</button>

This works because color="foo" generates class="mat-foo" for element.