Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Bootstrap 5 & MD 2.0 Colors

MarcCaruso free asked 4 years ago


Hi,

I am trying Bootstrap 5 & Material Design 2.0 (I have purchased an advanced subscription).

I would like to use the colors from the full pallet available in https://mdbootstrap.com/docs/standard/content-styles/colors/, but I didn't really catch what I have to do...

Your documentation send us to the following file: scss/free/_variables.scss.But what is the deal with this file? is it already loaded? Did I have to copy it somewhere else? What I have to do with?

For example, if I want to use the "purple 300" (#BA68C8) color for both text and background usage, what I have to do?

Thanks in advance for clarifying this point.

Kind Regards.

Marc


Marta Wierzbicka staff answered 4 years ago


Hi,

when you have installed Webpack with MDB 5, it will be very easy to use these colors from a full palette. Here you have our "Webpack starter" with the configured compilation of the SCSS files if you have a problem with compilation.

Steps:

1) in your project, run the npm start command

2) go to the scss/mdb.free.scss file and on the bottom of the page paste this code:

@import "./custom/styles";

3) go to the scss/custom/_styles.scss file and paste code like this:

body { background-color: $purple-300; color: $purple-300;}

4) compile your new styles to the mdb.css file by running this command: npm run build.

In this way, you can use all our colors variables.

Is this solve your problem? If not, please don't hesitate to write to me and I will try to help you more.

Best, Marta



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: Mac
  • Browser: Chrome
  • OS: Mac OS Catalina 10.15.7
  • Provided sample code: No
  • Provided link: Yes