DEV Community

Cover image for Announcing: Theme Builder for Angular Material
Dharmen Shah for Angular Material Dev

Posted on • Originally published at angular-material.dev

Announcing: Theme Builder for Angular Material

We are happy to say "Hello World" from our new tool called: "Theme Builder for Angular Material". You can visit it now at themes.angular-material.dev.

What is it?

Theme builder is a tool for Angular developers who are using Angular Material 18 in their project. This tool allows you to build, preview and export themes for Angular Material.

You can also share themes simply by using a unique link with your team of developers or designers.

How to use it?

First of all, create a project using Angular and Angular Material. You can jump to modifying define-theme mixin mixin if you have already created a project with custom theme.

npm i -g @angular/cli
ng new my-material-app --style scss --skip-tests --defaults
cd my-material-app
ng add @angular/material
Enter fullscreen mode Exit fullscreen mode

And select answers as below:

? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? Yes
? Include the Angular animations module? Include and enable animations
Enter fullscreen mode Exit fullscreen mode

Modifying the define-theme mixin

Take a look at src/styles.scss. Notice the usage of define-theme mixin:

// Define the theme object.
$my-material-app-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    density: (
      scale: 0,
    ),
  )
);
Enter fullscreen mode Exit fullscreen mode

We are going to make changes in above code to achieve customizations through CSS custom properties.

Add use-system-variables: true

Make changes in color and typography maps as below:

$my-material-app-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
      use-system-variables: true, // 👈 Added
    ),
    typography: (
      use-system-variables: true, // 👈 Added
    ),
    density: (
      scale: 0,
    ),
  )
);
Enter fullscreen mode Exit fullscreen mode

Modifying :root selector

Next, add below mixins in :root:

:root {
  @include mat.all-component-themes($my-material-app-theme);
  @include mat.system-level-colors($my-material-app-theme); // 👈 Added
  @include mat.system-level-typography($my-material-app-theme); // 👈 Added
}
Enter fullscreen mode Exit fullscreen mode

Generating theme from Theme Builder

Now go to themes.angular-material.dev, modify colors as per your need and copy the CSS variables.

Using CSS variables

Now, create a new file at src/styles/root.css and paste all content in it. Simply import that file through angular.json's styles property! Or any other dynamic way, such that root.css file is rendered in correct order to reflect all --sys-* variables.

{
    "styles": [
        "src/styles.scss",
        "src/styles/root.css"
    ],  
}

Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
alidarrudi profile image
ali

It was great. Only Angular Material