Card header color is not configurable via variables

[Qvatra]

Expected Behavior

Card header color should be configurable via variables

Current Behavior

Card header color is not configurable via variables

Failure Information (for bugs)

in _cards.scss file on line 170:

    .card-header-primary .card-icon,
    .card-header-primary .card-text,
    .card-header-primary:not(.card-header-icon):not(.card-header-text),
    &.bg-primary,
    &.card-rotate.bg-primary .front,
    &.card-rotate.bg-primary .back{
      background: linear-gradient(60deg, $purple-400, $purple-600);
    }

I see that it is hardcoded to $purple-400 and $purple-600 variables. What I expect to see is something like: background: linear-gradient(60deg, $brand-primary, darken($brand-primary, $gradient-darken-percentage));

Steps to Reproduce

1. change brand-primary to red
2. compile css
3. observe that card header is still purple

I've found the exact issue been fired before: https://github.com/creativetimofficial/ct-material-dashboard-pro/issues/148 The issue was never resolved, instead it was advised to edit source theme file and hardcode a required color. I'm sorry but If I'm going to modify source files of the theme how I would be able to upgrade to the latest in the future?

Another vivid indication that this is the bug is that class name says card-header-primary but never refers to $brand-primary variable. In that case It should be named card-header-purple...

In order to make it generic it should look something like:

  @each $color, $value in $theme-colors {
    .card-header-#{$color} .card-icon,
    .card-header-#{$color} .card-text,
    .card-header-#{$color}:not(.card-header-icon):not(.card-header-text),
    &.bg-#{$color},
    &.card-rotate.bg-#{$color} .front,
    &.card-rotate.bg-#{$color} .back {
      background: linear-gradient(60deg, $value, darken($value, $darken-gradient-percentage));
    }
  }

[ghost]

Was going to log the same issue and indeed cards don't follow color directives even after following the guidelines for changing colors and recompiling the scss.

Am using MD Dashboard Pro 2.1.0.

.card-header-warning etc. will work, but not .card-header-primary.

Agree that modifying source theme files seems a bad idea, except off course for modifications explained in https://demos.creative-tim.com/material-dashboard-pro/docs/2.1/getting-started/build-tools.html#change-brand-colors. (although that is not working for cards, which is the issue being raised here).

[groovemen]

Hello @Qvatra,

Thank you for using our products, I will ask you to give us the code that you are using that didn't work card-header-primary. We know that the colors are hardcoded and this is hard to change for different colors, just by changing the $brand-primary variable for example. But, for now, you have to change manually the colors in _cards.scss file. Sorry for the inconvenience. Also, I checked the card-header-primary, that you said that didn't work:

Best, Stefan