How to change Primary (or other) colors


Topic: How to change Primary (or other) colors

Jonathan Yates pro asked 5 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 5 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 5 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 5 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 3 years ago

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


jar8 answered 3 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 3 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 3 years ago

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


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

thank you too much


Marta Szymanska staff pro premium commented 3 years ago

Hi,

you're welcome.

Best, Marta


dominic_ks pro premium answered 2 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 2 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


Please insert min. 20 characters.
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