Skip to content

How to Override Theming Colors

Published by kksrini89 on May 6, 2020

Last updated on June 5, 2020

In this blog post, you will learn How to Override Theming Colors.

Introduction

Most of the time we would end up being as a developer not dive in to designing any of the web page template markup.

That leads us to depend on someone else on designing web pages, more importantly, applying styles.

Here I would like to give you a simple knowledge sharing on how we can override the theming colors. I faced this scenario when I was working with Angular Themingapplication.

I have considered Bootstrap CSS framework for this explanation.

How to Override Theming Colors

As we all do just by installing bootstrap with npm package manager,

> npm install bootstrap jquery -S

Once installed, you can get it from the node_modules folder.

Usually, we would use bootstrap SCSS files for variables, functions, mixins which comprised of SASS variables that we can straight away use else can override.

Lets for an instance, we have style.scss file where we have our custom css stylings for our application.

And having theme.scss file to keep color variables separating from our main scss file. Fortunately, I got theming kit as a reference while implementing this.

Step 1,

As a first step we should import bootstrap scss variables from theme.scss file,

@import "../node_modules/bootstrap/scss/variables";

Step 2,

Through step1, all the bootstrap variables would be available to override.

In order to override or replace bootstrap theming with our own colors, then we have $theme-color sass variable from bootstrap.

$theme-colors: ( 
  "primary": #D9D9D9, 
  "danger": red
);

By doing like above, theming would be overriden.

Totally, we have 8 different theming variables are there such as Primary, Secondary, Danger, Success, Warning, Light, Info and Dark.

Published inCSS