Topic: Customizing primary-color
Hello, I currently have the free version of MDB (jQuery 4.16.0) and so far been very impressed with the features. I plan to upgrade to pro soon. However i have hit a roadblock while trying to customize primary color. You documentation says to override primary color set $primary-color: in the custom-variables.scss. However on doing that it does not override the primary color and the default blue color is displayed. I even tried going into colors.scss and updating the primary-color variable there, still doesn't work.
_custom-variables.scss: $primary-color: #7e57c2;
<button type="button" class="mt-2 btn btn-sm btn-primary rounded-pill">Create New</button>
Hello Grzegorz,
Thank you for the response. I saw your snippet and that is overriding the btn-primary class. What i want to do is override the $primary-color variable so all classes that use the variable will then reflect the new color. As per the documentation below i'm trying to update custom-variables.scss. But that's not working. https://mdbootstrap.com/docs/jquery/getting-started/styles-customization/
As for the project configuration. I'm using an Angular 9.1.1 with Bootstrap 4.4. Here's how my angular.json looks like. Let me know what other information you need. Thanks.
"options": {
"outputPath": "dist/eschool-guru",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/mdbootstrap/css/mdb.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/mdbootstrap/js/mdb.min.js"
]
}
Grzegorz Bujański staff commented 4 years ago
If you are using Angular, why not use MDB Angular instead of MDB jQuery? Note that you import a css file in the configuration, not a SCSS file. That's why it doesn't work.
mudassir_saifi premium commented 4 years ago
Awesome. that worked. imported mdb-free.scss instead of mdb-min.css. Thank you.
Grzegorz Bujański staff commented 4 years ago
I'm glad I could help. Best, Grzegorz.
Hi.
I have prepared for you a snippet that shows how you can override this color: https://mdbootstrap.com/snippets/jquery/grzegorz-bujanski/1591553
You have given too little information to say why it didn't work in your case. But, considering that you are making changes to your scss files and it didn't work, I suppose you just have a badly configured environment. Do you use tools such as webpack in your project? How do you import scss files into your project?
Best, Grzegorz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.16.0
- Device: Desktop
- Browser: Chrom
- OS: Macbook Pro
- Provided sample code: No
- Provided link: No