Blog for web developers

Create color palette angular material

Choose any primary color for your website and generate color palette for angular material.

Define a real custom palette.

//style.scss
$custom-brand: (
    50: $primary-color-light,
    100: $primary-color-light,
    200: $primary-color-light,
    300: $dark-primary-color,
    400: $dark-primary-color,
    500: $dark-primary-color,
    600: $dark-primary-color,
    700: $dark-primary-color,
    800: $dark-primary-color,
    900: $dark-primary-color,
    A100: $dark-primary-color,
    A200: $dark-primary-color,
    A400: $dark-primary-color,
    A700: $dark-primary-color,
    contrast: (
        50: $primary-color-light,
        100: $primary-color-light,
        200: $primary-color-light,
        300: $primary-color-light,
        400: $primary-color-light,
        500: $white-color,
        600: $white-color,
        700: $white-color,
        800: $white-color,
        900: $white-color,
        A100: $primary-color-light,
        A200: $primary-color-light,
        A400: $primary-color-light,
        A700: $white-color,
    )
);

$user-admin-primary: mat-palette($custom-brand);
//$mat-red , $mat-pink etc are some default map color of theme.
$user-admin-accent: mat-palette($mat-red, A200, A100, A400);

// The warn palette is optional (defaults to red).
$user-admin-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$user-admin-theme: mat-light-theme(
  $user-admin-primary,
  $user-admin-accent,
  $user-admin-warn
);

@include style-theme($user-admin-theme);
@include angular-material-theme($user-admin-theme);

Santosh Shah

I am a JavaScript developer having enthusiasm on most frontend skills like JavaScript, HTML, CSS, SASS, node, gulp, angular etc. I love exploring new techniques and like to learn new technologies to keep my self up to date.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.