Customise Themes

Let's update the default theme to a light theme with maroon as the primary color and orange as the secondary. Use the Material Palette Generator to get the color values or use your own. http://mcg.mbitson.com is also a great tool to do this.

Material Palette Generator

Step 1: Add palettes to styles.scss.

styles.scss

$jet-maroon-palette: (
  50: #f8e6e8,
  100: #edc1c4,
  200: #d18885,
  300: #bb5c58,
  400: #bc3a33,
  500: #b92617,
  600: #ac1c17,
  700: #9c1313,
  800: #8f0b0c,
  900: #800000,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
  ),
);

$jet-orange-palette: (
  50: #fff3de,
  100: #ffe0ae,
  200: #ffcb78,
  300: #ffb640,
  400: #ffa600,
  500: #ff9600,
  600: #fc8a00,
  700: #f77900,
  800: #f26800,
  900: #e94b00,
  contrast: (
    50: #000000,
    100: #000000,
    200: #000000,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
  ),
);

Step 2: Update the $default-theme variable to include these palettes.

styles.scss

$default-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette($jet-maroon-palette, 900),
      accent: mat.define-palette($jet-orange-palette, 400),
    ),
    typography: $noto-sans-typography,
  )
);

Done!

Jet in custom theme