Angular and Bootstrap: How to Create Multiple Themes for the Same Application

Need to add multiple themes to your Bootstrap-powered Angular application? If so, then keep reading.

Let me start out by saying that there are many ways to skin this cat. In this guide, I'll describe the one that works well for me.

Your mileage may vary.

If you're an SCSS wizard, you might opt for using complex mixins and functions to create multiple themes.

If you're a little more simple, you might go with something that uses strictly CSS variables.

I found a solution that I think strikes the right balance. I hope you like it.

Note: this article is part of a series of tutorials on how to create an admin console using Angular and Bootstrap. Feel free to check out the whole thing if you want to follow from the beginning. Just remember that the articles are sorted by date in descending order so the first article is actually the last.

You can follow along here or take a look at the code on GitHub. 

Keeping It Simple

To keep things simple for the purposes of this guide, I'll just share two (2) themes: a light theme and a dark theme.

Personally, I'm not a fan of dark themes. But the kids these days seem to like them. So I'll share one here.

When everything is said and done, the user can just change one line of code to flip from one theme to another.

Of course, you can add as many theme as you want by following the pattern you see here. And still the user will only have to change one line of code to move to another theme.

So here's what the dark theme looks like:

And here's what the light theme looks like:

To reiterate the "we're keeping things simple" principle, I'll only share the code that colors the navigation bar. Not the actual content. 

But that's because there is no content yet. I'm just getting started with this admin console thing.

Speaking of getting started, let's do that now.

Park Your Themes

Create a new directory: src/app/_layout/themes

Unsurprisingly, that is where you're going to put your themes.

In that directory, create two (2) files:

• light.scss
• dark.scss

I'm pretty sure you can guess what each one of those files is all about.

Now edit light.scss and add this:

$menu-background-color: white;
$menu-text-color: darkslategrey;
$menu-highlight-color: deepskyblue;
$menu-highlight-bg: white;

Those are custom SCSS variables. They're unique to this application.

Next, edit dark.scss and add this:

$menu-background-color: black;
$menu-text-color: ghostwhite;
$menu-highlight-color: ghostwhite;
$menu-highlight-bg: slategrey;

As you can see, both SCSS files identify the same variables. But they assign different values to those colors based on the theme.

A Single Theme File

Next, add a new file called theme.scss in src/app/_layout/config

That file will include SCSS variable overrides that dictate the color scheme of your app.

If you're wondering what the variables are overriding, it's the default Bootstrap colors. That's how you customize your UI.

Make your theme.scss file look like this:

@import '../themes/light';
//@import '../themes/dark';


//Bootstrap SCSS variables
$dropdown-link-hover-bg: $menu-highlight-bg;
$dropdown-link-active-bg: $menu-background-color;
$dropdown-link-color: $menu-text-color;
$dropdown-link-hover-color: $menu-highlight-color;
$dropdown-link-hover-bg: $menu-highlight-bg;
$dropdown-link-hover-color: $menu-highlight-color;
$dropdown-link-active-color: $menu-text-color;
$dropdown-link-active-bg: $menu-highlight-bg;

$nav-link-color: $menu-text-color;
$nav-link-hover-color: $menu-highlight-color;

The @import statement at the top imports the SCSS variables that you defined in light.scss (see the previous section).

The second @import statement is commented out for now. If you wanted to switch from the light theme to the dark theme, you'd just comment out the first line and uncomment the second line.

That's the one-line change I was talking about.

(Okay, I guess it's technically two lines but somebody could just as easily change the file location in the first @import and make it a one-line change.)

Anyhoo, everything after the @import lines are Bootstrap SCSS variable overrides.

The variable names you see on the left aren't ones that I created. They're variable names set in Bootstrap.

If you want to learn more about how to find the SCSS variable names you'd like to override in Bootstrap, feel free to read my guide on that subject.

The right-hand side of each variable is an SCSS variable name defined in either light.scss or dark.scss (depending on the chosen theme).

Some of those variables get reused. For example, I'm using $menu-text-color for $nav-link-color, $dropdown-link-color, and $dropdown-link-active-color.

But you don't have to do that. You can set it up according to what works best for your application.

One Final Step

Now you've got your theme colors imported into theme.scss, but that's all you've done. You haven't changed your overall style yet.

Let's fix that now.

Edit styles.scss in the src directory. Make it look like this:

//overrides Bootstrap defaults
@import './app/_layout/config/theme';

@import '../node_modules/bootstrap/scss/bootstrap';
@import '../node_modules/bootstrap-icons/font/bootstrap-icons';

That top @import, as the comment indicates, overrides the default Bootstrap values.

And where does it get those overrides from? From the theme.scss file you just created.

After that, it's normal @import stuff.

That's it. Now you've themed your application based on whether you chose the light or dark theme in theme.scss.

A Word About the Navbar

If you're familiar with Bootstrap, then you know that you can theme the navbar with a light, dark, or primary color. But I didn't go over that here.

You could certainly go the extra mile by creating different themes for the bg-light, bg-dark, and bg-primary classes.

But we're theming an application. We're not theming Bootstrap.

So I've decided to not go quite that far with the theming. Also: I'm keeping it simple.

The HTML

There's really nothing to it. Just create a navigation bar like you normally do, omitting the background color class (see above).

Undoubtedly, you'll still have to make some tweaks in your own SCSS files, but that's par for the course. You can see the tweaks I added for the vertical navbar and the horizontal navbar on GitHub.

The important thing is to make sure those custom SCSS files work with any theme. 

Wrapping It Up

Now you know how to add multiple themes to your Angular application by overriding Bootstrap SCSS variables.

Just keep in mind that what you've learned here is only a starting point. You'll have to take these princples and apply them to your own application to get the right theme.

It will take some time. But now that you've got the right framework in place, it's just a matter of choosing the right colors and overriding the right variables.

Have fun!