A comprehensive guide on Custom themes with Angular material

Namaste UI (Author)
Angular Components
Share on Pinterest Share on LinkedIn Share on WhatsApp Share on Telegram

What is theming?

The theming system in Angular Material allows you to customize colors and typography styles of your application components.Before going ahead, we assume that youare familiar with thebasics of CSS and Sass, like variables, functions, mixtures, reusable components in Angular, etc. In this blog, we will focus on color customization principles and APIs.

Sass

  • The theming APIs for Angular Material are implemented in Sass.
  • Directly using the library’s Sass API offers you the most control over your application’s settings.

Palettes

  • A palette is a mixture of colors that defines a part of the color spectrum.
  • Each value in this mixture is called a hue.
  • Each color in a palette has an identifying number in the material design.
  • The numbers order hues within a palette from lightest through darkest, beginning with 50 and extending with each 100 value between 100 and 900.
  • The contrast colors serve as text colors when using a hue as the background color.
  • The example below demonstrates the structure of the palette.

$indigo-palette: (

 50: #e8eaf6,

 100: #c5cae9,

 200: #9fa8da,

 300: #7986cb,

  contrast: (

   50: rgba(black, 0.87),

   100: rgba(black, 0.87),

   200: rgba(black, 0.87),

   300: white,

 )

);

Themes

  • A theme is a set of colors and typography options for your site.
  • Each theme has three palettes, each of which specifies the component colors.
  • A primary palette for the colors that make an appearance more in your application.
  • An accent or secondary, the palette is intended to highlight various elements of your UI.
  • A Warn, or Error, the palette is used to highlight warnings and errors.
  • You can either construct a custom theme with Sass or import a pre-built theme CSS file to add CSS styles for a theme in your application.

Custom theme using built-in color palettes

  • Well, using pre-built themes is a very great thing since it permits us to acquire good-looking components right away without having to perform any serious work.
  • Let’s explore how to use Angular Material’s predefined colors to make a custom theme.
  • We must do the following to develop a custom theme:
  • Generate core styles: Styles for elevation levels, ripple effects, accessibility, and overlays are all included in this category of theme-independent styles.
  • Primary color palette: Build a color palette for the primary color of the theme.
  • Accent color palette: Create a color palette for the accent color of the theme.
  • Warn color palette:Create a color palette for the theme’s warning color.
  • While this seems to be a lot of work, Angular Material turns out to provide some kind of collection of features that make these tasks a breeze.
  • To begin, establish a better custom-theme. scss file and import this into our root styles. Rather than using the pre-built theme, use scss.
  • After that, we’ll go across each item on the list one after another:

@import ‘./custom-theme’;

Generate color styles

  • This one is surprisingly easy. Angular Material includes a variety of extremely powerful SCSS mix-ins that keep track of everything for us.
  • Mat-core is the mixin that generates Material’s core styles.
  • All we have to do is to import it and call it.
  • Here’s what that looks like (custom-theme.scss).

@import ‘../node_modules/@angular/material/theming’;

@include mat-core();

Generate color palettes

  • The next step is to create color palettes, which should then be combined to form a complete theme.
  • We may apply Angular Material’s mat-palette mix-in to create a color palette.
  • Mat-palette takes a base palette (yes, another palette; more on that in a moment) and returns a new palette with Material-specific hue color values for the provided base palette’s “light,” “dark,” and “contrast” color.
  • Now that we understand what a base palette is, we have to figure out how to create it. Is it essential for us to define and write them ourselves?
  • We must manually define our custom color palettes if we want to use them. Angular Material, but on the other hand, comes with defined palette definitions for all of the Material Design colors!
  • We can see how the palette for the red color is implemented simply by looking at the source code:

$mat-red: (

  50: #ffebee,

  100: #ffcdd2,

  200: #ef9a9a,

  300: #e57373,

  400: #ef5350,

  500: #f44336,

  600: #e53935,

  700: #d32f2f,

  800: #c62828,

  900: #b71c1c,

  A100: #ff8a80,

  A200: #ff5252,

  A400: #ff1744,

  A700: #d50000,

  contrast: (

    50: $black-87-opacity,

    100: $black-87-opacity,

    200: $black-87-opacity,

    300: $black-87-opacity,

    400: $black-87-opacity,

    500: white,

    600: white,

    700: white,

    800: $white-87-opacity,

    900: $white-87-opacity,

    A100: $black-87-opacity,

    A200: white,

    A400: white,

    A700: white,

  )

);

  • It’s fundamentally a map where each key (tone value) matches a color code. So, if we ever wish to produce our own customized color scheme, that’s how it might look.
  • Let’s start by creating a palette for our primary, accent, and warning colors. All we have to do is use a basic color scheme to call the mat-palette mix-in.
  • Let’s use $mat-light-blue as that of the primary color, $mat-orange as that of the accent color, and $mat-red as that of the warning color. Since we imported Angular Material’s theming capabilities in the previous step, we can simply refer to these variables:

$custom-theme-primary: mat-palette($mat-light-blue);

$custom-theme-accent: mat-palette($mat-orange, A200, A100, A400);

$custom-theme-warn: mat-palette($mat-red);

Understanding mat-palette

  • Mat-palette creates a Material Design color palette from a base color palette, as I stated previously.
  • But what does that mean?
  • Let’s take a look at the source code for that mix-in to get a better idea of what’s going on:

@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {

    $result: map_merge($base-palette, (

      default: map-get($base-palette, $default),

      lighter: map-get($base-palette, $lighter),

      darker: map-get($base-palette, $darker),

      default-contrast: mat-contrast($base-palette, $default),

      lighter-contrast: mat-contrast($base-palette, $lighter),

      darker-contrast: mat-contrast($base-palette, $darker)

    ));

    @each $hue, $color in $base-palette {

      $result: map_merge($result, (

        ‘#{$hue}-contrast’: mat-contrast($base-palette, $hue)

      ));

    }

    @return $result;

  }

  • A mix-in is purely a reflection that consumes arguments and outputs.
  • As we can see, we end up with a color palette that comes with everything the base palette provides, plus some additional keys for easy accessibility.
  • Back to the initial point of why we supply multiple values to mat-palette for our accent color, we now know that we are just configuring the default, lighter, and darker color tones.

Theming custom components

  • There’s one thing we haven’t discussed yet: custom component theming. We’ve only altered the look and feel of Angular Material’s components so far.
  • That’s because we’re creating our custom theme object to call the angular-material-theme mix-in.
  • If we remove that call, all Material components will switch to their default colors.
  • When we look at what angular-material-theme does, it becomes easier to understand:

@mixin angular-material-theme($theme) {

    @include mat-core-theme($theme);

    @include mat-autocomplete-theme($theme);

    @include mat-button-theme($theme);

    @include mat-button-toggle-theme($theme);

    @include mat-card-theme($theme);

    @include mat-checkbox-theme($theme);

    @include mat-chips-theme($theme);

    @include mat-datepicker-theme($theme);

    @include mat-dialog-theme($theme);

    @include mat-grid-list-theme($theme);

    @include mat-icon-theme($theme);

    @include mat-input-theme($theme);

    @include mat-list-theme($theme);

    @include mat-menu-theme($theme);

    @include mat-progress-bar-theme($theme);

    @include mat-progress-spinner-theme($theme);

    @include mat-radio-theme($theme);

    @include mat-select-theme($theme);

    @include mat-sidenav-theme($theme);

    @include mat-slide-toggle-theme($theme);

    @include mat-slider-theme($theme);

    @include mat-tabs-theme($theme);

    @include mat-toolbar-theme($theme);

    @include mat-tooltip-theme($theme);

  }

  • Every component in Angular Material requires a special theme mix-in that consumes a theme object and utilizes its properties to access theme-specific styles.
  • We can use the same pattern to theme our custom components, which is 

extremely useful because it allows us to alter the theme of our entire application merely by changing the theme object!

Conclusion

The theming abilities of Angular Material are especially strong, and it initially appeared to be the only UI component framework that gets it right. Custom components can be enabled to consume a specified theme to match the appearance and feel of the entire program, and color palettes can be simply updated and reused.

Leave a Reply

Your email address will not be published. Required fields are marked *