Dark mode not applying to textfield or buttons

[theodoretliu]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

I set the theme to dark mode using the createMuiTheme as stated in the documentation and provided it with a ThemeProvider. However, when I put in TextField or Button into my application, I get the same accent colors as the original light mode.

Expected Behavior 🤔

I expect the palette colors to change to match the colors on the Material UI page such as here or here.

Steps to Reproduce 🕹

Here's a code sandbox showing what I mean.

https://codesandbox.io/s/material-demo-pb53w

The colors on the TextFields are dark blue and don't contrast at all with the Paper behind them. Since the Paper color changed, I would expect the TextFields' outlines to change as well.

Context 🔦

I'm trying to use the dark mode since I think it better suits my use case, and I thought that the dark mode would be automatically applied to all the components.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.14
React	v16.13.1
Browser	Chrome 81.0.4044.138
TypeScript	3.9.2

[jaredrooprai]

Hey, on this page you can see what object properties dark mode changes:
https://material-ui.com/customization/palette/#dark-mode

It doesn't change the palette.primary property which is where that blue colour is coming from, you can do so like this :
https://codesandbox.io/s/material-demo-zr11m?file=/index.js

[theodoretliu]

Oh, okay, thank you for that clarification! Still, I really like the color palette that the material-ui.com website shows for their buttons and text fields: I assumed that this would be the color palette I would be getting once I switched over to dark mode.

I'm a bit surprised that dark mode doesn't change the primary colors or secondary colors. I am under the impression that this would be exactly the things that it changes besides the background colors.

[oliviertassinari]

Duplicate of #18776

We also have a thread running about having the documentation using the default theme. That would be great for v5.

[theodoretliu]

Just a quick follow-up question @oliviertassinari , what is the preferred way to get exactly the theme that is in the "dark mode" on the documentation website?

[oliviertassinari]

@theodoretliu With a copy & paste of the theme that the documentation uses?

[theodoretliu]

@oliviertassinari is that on the documentation website or should I look at the source code of the website? Sorry, really new to mui, just not sure where to be looking

[oliviertassinari]

Look at the source, in the docs folder.

[bennidhamma]

I'm guessing this is known, but the button doesn't get the right color on v5 (seems to work correctly on v4):

https://codesandbox.io/s/material-demo-forked-wwbv8?file=/index.js

[oliviertassinari]

@bennidhamma The change of button color comes from the removal of color="default" for color="primary" as a default. See #18776

[tansanDOTeth]

@bennidhamma The change of button color comes from the removal of color="default" for color="primary" as a default. See #18776

I don't have those attributes, and the buttons are still not using following the palette that I see here: https://mui.com/customization/dark-mode/#main-content