How to change Primary (or other) colors

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

Add comment

Marta Szymanska staff pro premium answered 8 years ago

1 0 Best answer

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?

Add comment

Jonathan Yates pro answered 8 years ago

0 0 Best answer

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

Add comment

Bartłomiej Malanowski staff pro premium answered 8 years ago

0 0 Best answer

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!

Add comment

jar8 answered 5 years ago

0 0 Best answer

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 5 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 5 years ago

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

Marta Szymanska staff pro premium commented 5 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 5 years ago

thank you too much

Marta Szymanska staff pro premium commented 5 years ago

Hi,

you're welcome.

Best, Marta

Add comment

dominic_ks pro premium answered 5 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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