Add dark mode custom theme - @angular/material

Lets begin with the installation process after then properly configuring the custom dark team in our application.

ng add @angular/material 
Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
> Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]
  Custom

selected Custom

? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? (y/N) y

? Set up browser animations for Angular Material? (Y/n) y

Now to use the dark theme, please follow the below syntax:

$Products-theme: mat.define-dark-theme((
  color: (
    primary: $Products-primary,
    accent: $Products-accent,
    warn: $Products-warn,
  )
));
.dark-theme{
  @include mat.all-component-themes($Products-theme);
}

Blog

Add dark mode custom theme - @angular/material

Phinehas Alabi

Join Our Newsletter. No Spam, Only the good stuff.

Related