How to change just primary color in an Angular Material pre-built theme?

3k Views Asked by At

I would like to use an Angular Material pre-built theme as it helps style, e.g., buttons and tables.

However, I need to set the primary color to exactly match a brand style guide. Can just the primary color be changed on the pre-built theme?

Alternatively, would it be easier to use a custom theme and bring in the styling for buttons, etc. from a pre-built theme? If so, how would that be done?

Below is my current relevant code. The @import in styles.css gives me Anuglar Material styling, but overwrites my brand color settings.

angular.json:

"styles": [
  "src/styles.scss", 
  "src/styles.css"
],

styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

styles.scss:

@import '~@angular/material/theming';

$my-purple: (
  50: #e9e3ed,
  100: #c8b9d3,
  200: #a38bb5,
  300: #7e5c97,
  400: #623981,
  500: #46166b,
  600: #3f1363,
  700: #371058,
  800: #2f0c4e,
  900: #20063c,
  A100: #ad73ff,
  A200: #8f40ff,
  A400: #720dff,
  A700: #6500f2,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: white,
    500: white,
    600: $white-87-opacity,
    700: $white-87-opacity,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: white,
    A700: $white-87-opacity,
  )
);

$primary: mat-palette($my-purple);
$accent:  mat-palette($my-purple, A200, A100, A400);
$warn:    mat-palette($mat-red);
$theme:   mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
0

There are 0 best solutions below