Custom Angular Material multiple themes (guide)

Angular Material 12 brought quite a lot of innovations in creating your own themes. Guys from Angular completely rewrote the styles with sass syntax like @use, sass:map, etc. The idea is the same, but the syntax is different.

If you use Angular Material <12 you can read this → article.

DEMO

Complete code you can find on GitHub in ‘ angular-material-12+’ branch.

I skipped the project creation step because the only thing needed is that Angular Material should use sass or scss as a preprocessor.

Let’s go through the files we need.

Styles tree

LocalStorageService

To save a user-selected theme, we’ll use LocalStorage.

StyleManager

Represents a service for *-theme.css files management. The service is able to add and remove style files in HTML using a key.

ThemeService

Used to keep track of the current theme.

Default theme init

style.scss

Define the default theme in style.scss.

Styles of your components

components.style.scss

The need for this file is described later in the article.

Color config function

theming.scss

mat-create-color-config function return theme’s color config. Present in project solely to reduce duplicate code.

Styles creation

Well, let’s take a look at creating our own theme using orange-theme.scss as an example. You can find light and dark theme files on GitHub

Don’t forget to add your custom theme files in angular.json

All most done

At this stage, we have redefined the styles of the Angular Material components. Let’s add theme switcher to the navbar of our application.

If you run the application now, you will see that the styles change only on Material components.

In order to change the styles of your components (for example, the background style and font color in app.component), you need to add ‘@ mixin’ to your component. It is preferable to use separate files.

To get the value of ‘$ theme’ in your *.style.scss mixin, you should added it to the file _components.style.scss

That’s all, everything should work now 😊

Thanks for reading!

Demo

Complete code you can find on GitHub in ‘ angular-material-12+’ branch.

Add me on Linkedin

--

--

--

JAVA / ANGULAR software engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Image upload with React Native and .NET Core

Call Express API in React using Webpack

How to Convert MP3 Files to WAV in JavaScript

Using Netlify to simplify the CI/CD pipeline with Angular

Composition and Inheritance, in Pictures

What Is React Native?

Creating Material UI themes in React

Is the Object is empty??

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Maxim Sevriukov

Maxim Sevriukov

JAVA / ANGULAR software engineer

More from Medium

Application Structure and Best Practices Of Angular — Part 2

Angular Widgets

How to implement an inline styles Content Security Policy with Angular and Express Static

Angular navigation events give a better UX