Angular Material Theme for theCodeCampus

This repository contains a theme for Angular Material with the styling and colors of theCodeCampus.

Installation

• Install Angular Material and it's peer dependencies as described on material.angular.io
• Skip including a prebuild theme
• Install theme via npm npm install @theCodeCampus/angular-material-theme
• Add following code to your global style.scss

  @import'@thecodecampus/angular-material-theme/src/styling/theme';
  @includetcc-angular-material-theme();
  // for dark theme use @include tcc-angular-material-dark-theme() instead// @include tcc-angular-material-dark-theme();

Applying the theme background to body

If you want to apply the theme background to all elements, add the class mat-app-background to the body element inside your index.html

<bodyclass="mat-app-background mat-app-foreground"><app-root></app-root></body>

How to override colors or typography

To override colors, you can use the variables $tcc-primary or $tcc-accent. For typography, you can use the variable $custom-typography.

To override the font family, use the variable $tcc-font-family.

// import theme@import'@thecodecampus/angular-material-theme/src/styling/theme';
// import alternate font family@import'@fontsource/source-code-pro';
// set $tcc-font-family before including the theme$tcc-font-family: "Source Code Pro";
@includetcc-angular-material-theme();