Topic: How to use Colors from Color Palette

Two Aow priority asked 1 year ago

Expected behavior I expect to be able to use the colors from here

Actual behavior I can't figure out how to use them. I understand that using className="bg-primary" changed the background color and className="text-primary" changes the text color. But how do I use colors like Purple 400 (#AB47BC). I mean other than changing the primary, secondary, etc or adding colors in _variables.scss. I have tried className="bg-purple-400". and className="bg-purple400" and similar for text but cannot figure out how to use the colors from the palette.

Resources (screenshots, code snippets etc.)

Two Aow priority answered 1 year ago

Thank you for your reply.

I read that part of the documentation but did not see a resolution in the same docs. This is how I am currently doing it. However, I wasn't sure if there was a better way because ultimately I want my users to choose their colors from a browser.

Grzegorz Bujański staff answered 1 year ago

As we mentioned in this section: to avoid increased file sizes, we don’t create text or background color classes for each of these variables

It means that there are no CSS classes for all colors. we chose some of the most important ones (such as primary, secondary, etc.) and there are CSS classes ready for these colors.

If you want to do it, I suggest to extend the theme-colors map with the colors you need in the file src/pro/scss/free/_variables.scss. This is how the colors we choose are defined:

$theme-colors: (
  'primary': $primary,
  'secondary': $secondary,
  'success': $success,
  'danger': $danger,
  'warning': $warning,
  'info': $info,
  'light': $light,
  'dark': $dark,
) !default;

Just add the color you need here. It's best to use ready-made SCSS variables. For example 'purple400': $purple400 or 'purpleA400': $purple-accent-400.

Such added color will automatically create classes like bg-purple400, bg-purpleA400 and text-purple400, text-purpleA400.

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: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 5.1.0
  • Device: MacBook Pro
  • Browser: Chrome latest
  • OS: macOS Ventura
  • Provided sample code: No
  • Provided link: Yes