How to change Primary (or other) colors

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: How to change Primary (or other) colors

Jonathan Yates pro asked 8 years ago

Hi, I have downloaded the free MDB for evaluation and one of the first things I am trying to do is simply to change the default colors. I have updated the primary-color in the _variables.scss from $primary-color: color("mdb-color", "lighten-2") !default; to $primary-color: color("green", "lighten-2") !default; and then recompiled the sass to css. But this does not seem to change the output colors. I have a nav set to primary in the index <nav class="navbar navbar-dark bg-primary"> but it is still showing with the default blue rather than green. Also I noticed that the imports in the mbd.scss are pointing to the wrong file paths. e.g. @import "mdb/free/data/colors"; There is no mdb/free/data/ directory below mbd.scss, only free/data so I had to update all the imports to point to free/data instead. e.g. @import "free/data/colors"; Yet still the output css does not get updated with the updated primary-color. Please can you advise how to do this? It would also be most helpful if you put a guide on your website showing how to do this. Currently you just list the available colors which isn't much help. Regards, Jonathan Yates

Marta Szymanska staff pro premium answered 8 years ago

Hi, You need to change $primary-color in data/_colors.scss file and recompile. Here you have the code: 
$primary-color: #4caf50;
.primary-color {
    background-color: #4caf50!important;
}

$primary-color-dark: #2e7d32;
.primary-color-dark {
    background-color: #2e7d32!important;
}
Do you use minified version?

Jonathan Yates pro answered 8 years ago

Hi, Thanks for your reply. I have tried this but it does not change the colour on the navbar which I have setup like this <nav class=”navbar navbar-dark bg-primary”> The colour is still the original blue. Yet I see in the generated mdb.css that the primary-color has been updated to my custom colour. But it has no effect on the navbar. It does however seem to work for a button. I placed the following button and the color is the correct updated primary colour. <button class="btn btn-lg btn-primary">Test</button> So, it appears to work for button with btn-primary, but not with nav with bg-primary. Do I also need to modify the bootstrap 4 css as well ? Jonathan

Bartłomiej Malanowski staff pro premium answered 8 years ago

Hi, Jonathan! It's because you changed .primary-color, not .bg-primary. Try to use .primary-color class instead of .bg-primary

avanibhatnagar commented 6 years ago

I tried doing that. It still doesn't let me choose my colors!

jar8 answered 6 years ago

hi , for change primary color, what file scss i have to change ?, i have the MDB-Pro_4.8.2 and i can't found data/_colors.scss that Marta Szymanska do mention.

Marta Szymanska staff pro premium commented 6 years ago

Hi,

in MDB Gulp package, a path to the colors is scss/core/_colors.scss. Also, I recommend you to update your package to the newest version, for now, it is a 4.8.5 version of MDB package.

Best, Marta

jar8 commented 6 years ago

thanks by the answer , where can i download the newest version?, please

Marta Szymanska staff pro premium commented 6 years ago

Hi,

here is the link: https://mdbootstrap.com/profile/my-orders/. When you are logged in to your MDB account, you will find the newest package at this link.

Best, Marta

jar8 commented 6 years ago

thank you too much

Marta Szymanska staff pro premium commented 6 years ago

Hi,

you're welcome.

Best, Marta

dominic_ks pro premium answered 5 years ago

Hi, following on from this - this file is in the node_modules folder - presumably if you update colours here they will be overwritten next time you update MDB?

Marta Szymanska staff pro premium commented 5 years ago

Hi,

with every update of our MDB package, we overwrite our files. If you don't want the new files to overwrite your custom colors variables and classes, you need to add your custom settings to the _custom-styles.scss file and when you download a new package, you replace an existing _custom-styles.scss file with your own one and you have updated the package of MDB and your custom code. Also, you can download the new MDB package and copy and paste new CSS, JS and SCSS files to your existing project. Maybe it will be easier for you.

Best, Marta
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Jonathan Yates
Pro User
12Support score
9Questions 22Answers
0Snippets likes 0Snippets