Custom Themes and Palette Generator Angular Material

Introduction

In Angular projects, applying theme which will be consistent throughout our application is considered to be a significant step. This gives us flexibility in developing the application in an elegant way. Theming considers being a hard and significant step while designing applications. With a particular theme throughout our application makes our UI more user-interactive. With the help of Angular Material, doing theming becomes easy and robust. A theme is a combination of colors that are applied to Angular Material's components. In Angular Material, we have different color palettes to define a theme. Let us see what our theme is all about:
  • A Primary Palette - This color will be used majorly across the application. We will see this color almost on every screen of our application.
  • An Accent or Secondary Palette - This color is used as the secondary color. 
  • Warn Color - This color is used for showing errors, warnings and wrong states in the application.
  • Foreground Color - This color is used for text, heading, contents, and icons.
  • Background Color - This color is used as the background color in HTML elements like images, divs, etc.

Using Pre-built Theme

We can use built-in themes provided by Angular material. Available themes are: 
deeppurple-amber.css, indigo-pink.css, pink-bluegrey.css, purple-green.css

Including a pre-built theme is easy with Angular CLI. Go to the .angular-cli.json file the styles array make an entry for pre-built theme CSS file as follows:

    "styles": [
      "../node_modules/bootstrap/dist/css/bootstrap.min.css",
      "styles.scss",
      "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"
    ]

We can also import a CSS file in our styles.css file:

@import '../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css';

Defining a Custom Theme

We can define our own theme in the Angular Material using color palettes and providing a base-color to generate a color palette which we can include in our custom theme file. We can use predefined color palettes or can create a new palette depending on the requirement. 
We can write the below code in a custom-theme.scss file or can directly include it in styles.css file as well. When we add Angular Material using the below command:

ng add @angular/material

This command will add Angular material in our project and ask us the question regarding theming. Choose a prebuilt theme name, or "custom" for a custom theme. We can choose a custom theme option while installing the Angular Material itself. If we choose the custom option here we will see an additional code written below in our styles.css file. In the below code $hydrosphere is the project name. By default, we have some colors defined as primary, secondary and warn colors. We can change these colors by creating our own custom palette. 

// Custom Theming for Angular Material
@import '~@angular/material/theming';
@include mat-core();
$hydrosphere-xylem-com-primary: mat-palette($mat-indigo);
$hydrosphere-xylem-com-accent: mat-palette($mat-pink, A200, A100, A400);
$hydrosphere-xylem-com-warn: mat-palette($mat-red);
$hydrosphere-xylem-com-theme: mat-light-theme($hydrosphere-xylem-com-primary, $hydrosphere-xylem-com-accent, $hydrosphere-xylem-com-warn);
@include angular-material-theme($hydrosphere-xylem-com-theme);

Creating a Custom Palette Using Base Color

Now if we want to create a new palette using a different base color. Then visit the link here. We will see the below page. Here we can choose any color or provide the HEX code to create a palette. If we choose some color and click choose. Then we will get a color palette which is based on the base color provided by the user. Now we will give the Palette Name. In the below image, I have given the palette name as hydro. Theme Name should also be given.


Now go to the down arrow as shown below which is export code:


We will get the below window:

We will select ANGULAR JS(MATERIAL 2) and copy the below code:

/* For use in src/lib/core/theming/_palette.scss */
$md-hydro: (
    50 : #e8f0fc,
    100 : #c5daf8,
    200 : #9ec2f3,
    300 : #77aaee,
    400 : #5a97ea,
    500 : #3d85e6,
    600 : #377de3,
    700 : #2f72df,
    800 : #2768db,
    900 : #1a55d5,
    A100 : #ffffff,
    A200 : #d5e1ff,
    A400 : #a2bdff,
    A700 : #89abff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

We will take this code in our styles.css file as follows. We have changed the primary, accent and warm colors using this hydro theme palette. We are good to go with this custom theme. 
$hydrosphere-xylem-com-primary: mat-palette($md-hydro, 500);
$hydrosphere-xylem-com-accent: mat-palette($md-hydro, 500); 
$hydrosphere-xylem-com-warn: mat-palette($md-hydro, 500);

$md-hydro: (50 : #E0EFF4,
  100 : #B3D8E3,
  200 : #80BED1,
  300 : #4DA4BF,
  400 : #2691B1,
  500 : #007DA3,
  600 : #00759B,
  700 : #006A91,
  800 : #006088,
  900 : #004D77,
  A100 : #A5DAFF,
  A200 : #72C5FF,
  A400 : #3FB0FF,
  A700 : #25A5FF,
  contrast: (50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #FFFFFF,
    500 : #FFFFFF,
    600 : #FFFFFF,
    700 : #FFFFFF,
    800 : #FFFFFF,
    900 : #FFFFFF,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  ));
// Custom Theming for Angular Material
@import '~@angular/material/theming';
@include mat-core();
$hydrosphere-xylem-com-primary: mat-palette($md-hydro, 500);
$hydrosphere-xylem-com-accent: mat-palette($md-hydro, 500);
$hydrosphere-xylem-com-warn: mat-palette($md-hydro, 500);
$hydrosphere-xylem-com-theme: mat-light-theme($hydrosphere-xylem-com-primary, $hydrosphere-xylem-com-accent, $hydrosphere-xylem-com-warn);
@include angular-material-theme($hydrosphere-xylem-com-theme);

Comments