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.

As we mentioned in this section: https://mdbootstrap.com/docs/react/content-styles/colors/#section-full-palette 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.