Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Impossible to change colors #66

Closed
vbartusevicius opened this issue Oct 2, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@vbartusevicius
Copy link

commented Oct 2, 2018

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.

@EINazare

This comment has been minimized.

Copy link
Collaborator

commented Oct 2, 2018

Hello @vbartusevicius ,

I am sorry to hear this.
At the moment we do not have time to refactor all of our code.
When we will have some spare time we will see how we can make our code more variable friendly than it is now.

Best,
Manu

@kaos

This comment has been minimized.

Copy link

commented Oct 2, 2018

This is one of my main concerns as well. That the styling doesn't use the features present in material ui (theme-ing) is a big surprise, and makes it hard to get the look-and-feel consistent when using standard material ui components along with those from this kit.

The second issue being that we can't install and use these components as a normal library dependency in a sensible way.

Love the stuff you've done with it, so if those two are fixed, it'll be a really nice addition to the material ui experience.

@EINazare

This comment has been minimized.

Copy link
Collaborator

commented Oct 3, 2018

Hello there @kaos ,

Thank you for your interest in working with our products, and sorry for this issue.
At the moment we are stuck on some other projects, and we do not have the time needed to make major changes to these products (speaking here about the Material React products).

Best,
Manu

EINazare pushed a commit that referenced this issue Jan 24, 2019

Manu
- Run prettier
- Added hexToRgb function
- Made all primary, success.. colors, linear gradients and box shadows 
to use the hexToRgb function - no more hardcoded colors
- Solved #66

@EINazare EINazare closed this Feb 14, 2019

@Wintereise Wintereise referenced this issue May 3, 2019

Open

Editing the color palette / style globally #90

4 of 4 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.