anartfulscience free asked 5 years ago

Hello, I'm evaluating the free version and I'm very interested in upgrading. I'd like to update the basic colour variables via scss so that it will update the entire colour palette and accents. E.G $brand-primary: #372e29 !default; $brand-success: #372e29 !default; $brand-info: #372e29 !default; $brand-warning: #372e29 !default; $brand-danger: #372e29 !default; I've added the above before I'm importing MDBootstrap/sass/mdb but it doesn't update the colours. Can you let me know how to update these variables. I don't want to apply color css rules on the actual html elements to override your default values. Many thanks, Stephen

Marta Wierzbicka staff answered 5 years ago

Hello, 1. Add classes named like these variables to _colors.scss, e.g.:
.brand-primary {
    background-color: $brand-primary; 

.brand-success {
    background-color: $brand-success;
2. Then you can change default colors in _variables-b4.scss, e.g.:
$brand-primary:             #ff4444 !default;
$brand-success:             #ffbb33 !default;
3. You need to change the order of files in mdb.scss, now is like this:
// Variables
@import "mdb/free/data/colors"; 
@import "mdb/free/data/variables-b4";
And it should be like this:
// Variables
@import "mdb/free/data/variables-b4";
@import "mdb/free/data/colors"; 
4. Remember to compile your scss files

Please insert min. 20 characters.


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


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No