Update color variables

Topic: Update color variables

anartfulscience free asked 7 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

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

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

anartfulscience

0Support score
1Questions 0Answers 0Snippets