Create multiple themes with Angular and Sass — without using Material

A beginner’s tutorial on how to create and apply multiple themes on a web app using only Angular and Sass

Photo by Scott Webb on Unsplash

This week I was given the task of setting up a theme picker for a client, but many parts of the app were not developed using Material. The client didn’t want to do a huge refactor, so I had to find a way to do it without using the pre-built Material themes. Here’s how I did it using only Sass variables and an Angular service.

This is very useful if you want to set up a simple dark theme, or if you have many products that use the same template, but different colors and fonts. For this challenge, the client had already provided all the color palettes and variables, so I will discuss only the actual coding part and not the design details.

A simple dark theme for a login page

1) Create theme files

The first thing we need to do is create a folder with all the themes:

Themes folder

In each file, set up your variables. You can import the common variables that you are already using on your app, and create the themed variables like this:

Theme file with variables

You don’t need to import the theme files on your other style files, you can use the variables directly, like this:

2) Import theme files as style bundles in your angular.json

Next, we need to import all these files in the styles part of our angular.json. What we want to achieve here is that every bundle creates a different .css file after the build, and then we’ll load the specific theme file dynamically through our service. Here’s how it should look:

By setting lazy as true, we’re saying that we’ll load the files later. Newer versions of Angular have replaced lazy with inject, so make sure you check your Angular version and the current documentation at this point.

3) Create themes service

Now that we’re generating our .css files from our .scss themes, we can inject the right theme dynamically on our app. Create a themes.service.ts and a method that will be responsible for injecting the styles. In my case, I had to get the product code first, and this code determined the theme, but you might have a different way of checking which theme you’ll need. Make sure you import DomSanitizer and sanitize your URL correctly to avoid security issues.

4) Inject styles

At this point you’re ready to call your method and inject your theme into your HTML! This was easy, wasn’t it? You can create a link tag dynamically using your service, but in my case I decided to have the link tag in my HTML and inject only the URL. Don’t forget to set your type and rel attributes:

<link [href]="themeService.getThemeURL()" type="text/css" rel="stylesheet"></link>

That’s it! Now hopefully you should see the different color palettes and fonts according to your selected theme:

I hope this tutorial was helpful! Using multiple themes is very common in web development now, as almost every app has a dark mode. Setting up themes doesn’t have to be a complicated task that requires a lot of libraries, you can do it today using the tools you already have. Happy coding!

Thank you for reading this far! Sign up if you want to read more about technology, traveling, learning languages and living abroad.