A theme. You need a theme.

Hey, every other website has a theme. Why not yours?

Good news: if you've opted for Angular and Bootstrap as part of your tech stack, you can create a custom theme that reflects your brand.

And I'll show you how it's done in this guide. Because I'm cool like that.

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. 

The Business Requirements

Like most applications, the admin console uses a menu system. The user can decide to use a horizontal or a vertical menu. I've explained how to make that happen in a separate article.

And here's the thing: when desktop users hover over a menu item, you want it to highlight. That's standard UI fare.

But the default Bootstrap highlight color is dingy grey. It looks like this:

But you want something blue-ish. Not that grey stuff.

So the objective here is to override the default Bootstrap menu item highlight color with your own color.

Now let's make it happen.

Finding the Right Variable Names

First up, you need to find out the name of the variable that Bootstrap uses to draw the background color on highlighted menu items.

Fortunately, the Bootstrap variables are intuitively named. And you can find a list of all the variables in a file also intuitively named _variables.scss.

That file, by the way, is located in node_modules\bootstrap\scss. It's off of your source directory but probably not visible in your IDE. You'll need to go to the operating system to check it out.

Open that file up and you'll see the variables that you might want to override.

Here, you're overriding two variables:

  • $dropdown-link-hover-bg
  • $dropdown-link-active-bg

Okay, for the purposes of this requirement, you can get away with overriding just the first variable. But the second one paints the link a deep blue color when the user clicks on it and that looks pretty ugly, too.

Now in your IDE head over to the src/app/_layout/config directory. Create a new file called color-config.scss. Make it look like this:

$dropdown-link-hover-bg: lightblue;
$dropdown-link-active-bg: lightblue;

Yep. It's that simple.

But you aren't done.

Back in Style

While still in your IDE, head over to the /src directory and edit styles.scss. 

At the top of that file, import the color-config.scss class you just created. Make sure you do it before you import the Bootstrap stylesheets.

The whole thing should look like this:

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

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

It might seem counterintuitive to import variable overrides before importing the variables themselves, but that's what you need to do here.

If you look at that _variables.scss file, you'll see that plenty of the variable definitions are followed by !default.

That's the SCSS way of saying: "If this variable isn't already defined, then define it here."

But you already defined those two variables yourself. So they won't get redefined.

Yeah. You have to get used to it.

Anyhoo, now you're ready. Head over to the command line and go to the root of your project. 

Then start it up with the usual ng serve command.

Take a look at that vertical menu again and you'll see this:

Voila! You've overriden the Bootstrap default colors for menu highlights.

Wrapping It Up

Keep in mind: I also used some custom formatting to get my menus just the way I wanted. You can see that styling here (vertical menu) and here (horizontal menu).

But you don't need to get fancy. The above solution will work just fine in overriding the Bootstrap defaults.

Feel free to override any other defaults you'd like to change. Give your website a personality that reflects your business model.

Have fun!

Photo by Sharon McCutcheon from Pexels