Announcing: Theme Builder for Angular Material

Build, preview and export themes for Angular Material 18

4th June, 2024 — 2 min read

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](https://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](#modifying-the-define-theme-mixin) mixin if you have already created a project with custom theme. ```bash npm i -g @angular/cli ng new my-material-app --style scss --skip-tests --defaults cd my-material-app ng add @angular/material ``` And select answers as below: ```bash ? 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 ``` ### Modifying the `define-theme` mixin Take a look at `src/styles.scss`. Notice the usage of `define-theme` mixin: ```scss // 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, ), ) ); ``` 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: ```scss $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, ), ) ); ``` ### Modifying `:root` selector Next, add below mixins in `:root`: ```scss :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 } ``` ## Generating theme from Theme Builder Now go to [themes.angular-material.dev](https://themes.angular-material.dev), modify colors as per your need and copy the CSS variables. ![embedded video](/assets/angular-material.dev/Announcing_%20Theme%20Builder%20for%20Angular%20Material/themes_demo_bdoe7j.mp4) ### 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. ```json { "styles": [ "src/styles.scss", "src/styles/root.css" ], } ```
Dharmen Shah
Written by Dharmen Shah

I have around 8+ years of experience in IT industry. I have got opportunity to work at different companies with different technologies, mostly focused on Front-end, like Angular, React, Next, vanilla web stack (HTML, CSS, JavaScript).

You can find me on Twitter, Linkedin and Github.

Discuss online

Share this article

Read more

View all articles

Learn more

View courses page

Envelop
Don't miss any update

Stay up to date

Subscribe to the newsletter to stay up to date with articles, courses and much more!

Angular Material Dev

Angular Material Dev is one place stop for developers to learn about integrating Material Design in Angular applications like a pro.

Find us on X (Twitter) and LinkedIn