ChangeMaterialColors - usil/eventhos-web GitHub Wiki

How to change material colors

This project uses angular material to change the color of the theme go to src/customtheme.scss.

First create at least 2 custom color palette

$color-blue: (
  50: #b8b8fc,
  200: #b0b0fa,
  300: #8686eb,
  400: #5858da,
  500: #4747d3,
  600: #3636be,
  700: #2525ac,
  800: #1a1aa3,
  900: #0b0b96,
  A100: #0b0b96,
  A200: #0b0b96,
  A400: #0b0b96,
  A700: #0b0b96,
  contrast: (
    50: white,
    100: white,
    200: white,
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: white,
    A200: white,
    A400: white,
    A700: white,
  ),
);
$color-yellow: (
  50: #fffae1,
  200: #fcf5d1,
  300: #fcefad,
  400: #fcec9e,
  500: #fae478,
  600: #ffe250,
  700: #ffdd34,
  800: #fcd61c,
  900: #ffd300,
  A100: #ffd300,
  A200: #ffd300,
  A400: #ffd300,
  A700: #ffd300,
  contrast: (
    50: #0b0b96,
    100: #0b0b96,
    200: #0b0b96,
    300: #0b0b96,
    400: #0b0b96,
    500: #0b0b96,
    600: #0b0b96,
    700: #0b0b96,
    800: #0b0b96,
    900: #0b0b96,
    A100: #0b0b96,
    A200: #0b0b96,
    A400: #0b0b96,
    A700: #0b0b96,
  ),
);

Define primary and accent colors

$my-primary: mat.define-palette($color-blue, 900);
$my-accent: mat.define-palette($color-yellow, 900, 700, 400);

Define the theme

$custom-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-primary,
      accent: $my-accent,
    ),
  )
);

@include mat.all-component-themes($custom-theme);
⚠️ **GitHub.com Fallback** ⚠️