Skip to content

Impossible to change colors #66

@vbartusevicius

Description

@vbartusevicius

First of all - thank you for great job you did. The dashboard looks really great, but after we got used to it, we bumped into major issues:

At first it seems that primary color is defined in material-dashboard-react.jsx with name primaryColor. That looked great, but:

  • just below there is primaryBoxShadow which uses hard-coded RGB values of primaryColor.
  • same thing with primaryCardHeader - hardcoded RGB
  • buttonStyle.jsx - buttonStyle.primary uses hardcoded RGB for boxShadow.

Same applies for all colors.
It is practically a rewrite for someone willing to use different color palette and total mess is guaranteed when one would like to update package.

In my opinion best approach would be to use custom Material-ui theme as this is how they suggest to customize components. If that's not possible I suggest to use some color manipulation package, like https://www.npmjs.com/package/color:

const colorPrimary = Color('#ff9800');
const primaryBoxShadow = {
    boxShadow:
        `0 12px 20px -10px ${colorPrimary.alpha(0.28).rgb().string()}, 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px ${colorPrimary.alpha(0.2).rgb().string()}`
};

Sorry for criticism, but this is a main issue we decided to abandon further integration of this nice dashboard.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions