-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
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
Primary color does not match the theme #9857
Comments
@ralphsmith80 You can learn more about theme palette configuration in the documentation. |
@oliviertassinari @ralphsmith80 is correct, we're displaying the current theme, rather than the default theme, so the |
@mbrookes Oh right 👍 |
@ralphsmith80 Thanks for raising the issue. |
Thanks guys! You pointed out a major missing expectation. The demo page does not represent the default theme. Not sure if there are plans to align that when 1.0 is out of beta, but I think it would be a good idea so the demo represents what you get out of the box. Also another point of confusion is around the palette example. Overriding A400 has no effect in the example as the accent color being used is I don't know if it's worth filing a different issue for that or not. |
Nope, as @oliviertassinari mentioned: #9857 |
@mbrookes What do you think of making the current documentation palette the default palette? It sounds simpler. |
So it seems there are a few options:
It isn't a priority in any case. |
@mbrookes Option 5 sounds good to me. |
I would like to put my two cents in. It's not clear to me whether the
should be used as ink in the light theme, which is the accent color. Therefore I assume that the |
I agree that option 5 is good enough. However, I think it will also be very helpful if the documentation pointed out that it is not using the default palette, hence differences should be expected. The reason is that it is possible that someone (like myself) was wondering if it is caused by some kind of misconfigurations (e.g., missing stylesheets, etc). |
@yihangho Where in the docs would you expect to find that? (With such extensive documentation, discoverability can be hard for new users.) https://material-ui.com/style/color/ Somewhere else? |
@mbrookes Among the links you posted, I think the getting started FAQ. However, for some reason, I didn't refer to that. Initially, I checked the installation guide because I remember there are references to external deps (the fonts), so I thought it might be documented there. After that, I went to https://material-ui.com/customization/default-theme/ to diff the color code against what I'm seeing. All in all, I think a brief note at the following pages will help a lot: https://material-ui.com/getting-started/faq/ |
@yihangho Great! Would you like to add it? |
@mbrookes Will do! |
Just want to chime in and say I got super confused by this as well. Tore my app apart to find my theme mistake and it took a while to realize it out-of-the-box defaults to Obviously I didn't think to look at the FAQ to see if there was a reason for this (thanks for adding that @yihangho !) Part of my confusion came from setting I'd vote on any of 1, 2, 3 or 4 as a way to help lessen this confusion. I'm happy to make one those changes in to docs if others are confused and run into this thread. |
1 is out - we've settled on that color for the logo. I can't pick a better winner than 5, other than adding the same note in other parts of the docs. (Default theme page seems logical...) |
@mbrookes I think you caught the quote with my tag instead of @alexboots comment. Obviously this isn't a problem for me now that I know about it. If people are having problems with this then based on the fact that material-ui is reving so quickly I think you could make a breaking change and just put in a breaking change release. It sound like changing the logo color is not possible - maybe for brand reasons so I personally would go with (2). I like the demo page colors better anyway but that's just my opinion. |
@ralphsmith80 Oops, apologies, yes, corrected. After the 3.0 shenanigans, the next planned breaking release isn't expected for 6 months. However given that @alexboots is the first person in 6 months to tag this issue, I'm reluctant to change anything. If someone wants to enhance the documentation in the meantime, I'm good with that. |
Looking at the default theme I would Based on the demos I expect the button background color to be
#2196f3
but it's actually#3f51b5
. Possibly the demo page is just using a different demo theme and I'm not understanding how to extend the existing light theme.Ultimately I want to be able to override the default theme to provide a new primary and accent color. I in the past I've used the pre 1.0 steps. Now it is unclear to me from the docks how to do this without providing an entire new theme. That's a lot when I just want to override a few variables.
Expected Behavior
Primary theme color should be used
Current Behavior
After files are processed through webpack from
create-react-app
setup (not ejected) the background color for appbar and button is#3f51b5
Steps to Reproduce (for bugs)
https://codesandbox.io/s/612mpxw7kn
The text was updated successfully, but these errors were encountered: