[docs] Checking the theme via console.log doesn't return the correct mode

[Abhishek332]

Related page

https://mui.com/material-ui/customization/how-to-customize/

Kind of issue

Unclear explanations

Issue description

(Previous issue title: "In material ui docs, when we check theme object by console.log theme.palette.mode show dark but in reality MUI comes with light theme by default. console object should show the actual theme object values that MUI uses by default.")

MUI comes with light theme by default but when in docs when we open console and check default value of theme object it shows mode: dark.

Similar issue I faced for palette.primary as well in docs theme object showing there is 50, 100, 200 ....so on property is available for theme.palette.primary but when I check in my project by logging Theme object there is no property available like 50, 100 ....etc.

Theme customization guide should be clear more that show people with example how can we customize theme properly.

This is what docs is showing

This is what theme object is actually providing

Context

I am trying to make color schemes fully customize based on my UI design. I have a way to do it I can define colors and override it using sx props but I believe this should be done from the theme only. So we can handle customize dark and light theme.

Search keywords: theme customize

[siriwatknp]

Thanks for the feedback! our documentation site is built with multiple Material UI themes, so the console might not be useful that much. I think we could improve this in v6 given that we are fully moving to CssVarsProvider.