3_Creating custom Theme - mukeshrathore/base-project GitHub Wiki

Creating custom theme based on material design specification

https://material.io/archive/guidelines/
Icons resource: https://material.io/resources/icons/?style=baseline

Adding custom Fonts and using them

Custom fonts can be added under 'projects/base-app/src/assets/fonts/' location and declare them in index.html eg:


<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
Please replace above google font with custom fonts if you are using of your own.

Creating theme.scss

Since every application have their own theme and styles, we are creating theme based on application level instead of library level. Create new file 'theme.scss' which would be on same level as of styles.scss.

Declaring theme.scss in angular.json

        `"styles": [
          "projects/base-app/src/theme.scss",
          "projects/base-app/src/styles.scss"
        ],`

There would be 2 instances where we need to add theme.scss in angular.scss

Creating custom theme in theme.scss

Remove all theme configuration generated by angular material from styles.scss and add those lines of code in theme.scss along with below lines:

Creating Palette Palette reference:

$mat-custom-palette-1:( 50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, A100: #8c9eff, A200: #536dfe, A400: #3d5afe, A700: #304ffe, contrast: ( 50: $dark-primary-text, 100: $dark-primary-text, 200: $dark-primary-text, 300: $light-primary-text, 400: $light-primary-text, 500: $light-primary-text, 600: $light-primary-text, 700: $light-primary-text, 800: $light-primary-text, 900: $light-primary-text, A100: $dark-primary-text, A200: $light-primary-text, A400: $light-primary-text, A700: $light-primary-text, ) );
Please note palette consist of background color and contrast(text/font color)

Importing theming configs // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming @import '~@angular/material/theming'; // Plus imports for other components in your app.
Importing mat-core function // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat-core();
creating primary, accent and warn palettes

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$base-app-primary: mat-palette($mat-custom-palette-1,900,A400);
$base-app-accent: mat-palette($mat-custom-palette-1, A200, A100, A400);
// The warn palette is optional (defaults to red).
$base-app-warn: mat-palette($mat-custom-palette-1,50);

Creating light theme by combining primary, accent and warn palettes
// Create the theme object (a Sass map containing all of the palettes). $base-app-theme: mat-light-theme($base-app-primary, $base-app-accent, $base-app-warn);
Including newly created theme in angular-material-theme
// Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($base-app-theme);
applying color palette to button
$button-primary: mat-palette($mat-custom-palette-1,A200,A400); $button-accent: mat-palette($mat-custom-palette-2,50,A100,A400); $button-warn: mat-palette($mat-custom-palette-1,200); // Created then theme object for buttons $button-theme: mat-light-theme($button-primary,$button-accent,$button-warn); .buttons{ @include angular-material-theme($button-theme); }

Creating custom Typography

Similar to above theme configs, we need to create custom typography which needs to be applied to angular-material widgets/components // Define a custom typography config that overrides the font-family as well as the 'headlines' and 'body-1' levels $typography:mat-typography-config( $font-family:'Roboto, "Helvetica Neue", sans-serif', $headline:mat-typography-level(32px,48px,700), $body-1:mat-typography-level(14px,24px,500) );
// Override typography CSS classes (e.g., mat-h1,mat-display-1,mat-typography,etc.). @include mat-base-typography($typography); // Override typography for a specific Angular material components @include mat-checkbox-typography($typography); // Override typography for all Angular Material, including mat-base-typography and all components. @include angular-material-typography($typography);