[docs] Improve the documentation of the dark theme (#19122)

docs/src/modules/components/MarkdownElement.js

@@ -239,7 +239,7 @@ const styles = theme => ({
       '& .prop-default': {
         fontSize: 13,
         fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
-        borderBottom: `1px dotted ${theme.palette.text.hint}`,
+        borderBottom: `1px dotted ${theme.palette.divider}`,
       },
     },
     '& td': {

docs/src/pages/customization/default-theme/DefaultTheme.js

@@ -135,7 +135,7 @@ ObjectEntry.propTypes = {
 };
 
 function Inspector(props) {
-  const { data, expandPaths } = props;
+  const { data, expandPaths, ...other } = props;
 
   const keyPrefix = '$ROOT';
   const defaultExpanded = React.useMemo(() => {
@@ -153,6 +153,7 @@ function Inspector(props) {
       defaultEndIcon={<div style={{ width: 24 }} />}
       defaultExpanded={defaultExpanded}
       defaultExpandIcon={<CollapseIcon />}
+      {...other}
     >
       {Object.keys(data).map(objectKey => {
         return (
@@ -175,14 +176,13 @@ Inspector.propTypes = {
 
 const styles = theme => ({
   root: {
+    width: '100%',
+  },
+  inspector: {
     backgroundColor: '#333',
-    borderRadius: 4,
     color: '#fff',
-    display: 'block',
-    padding: theme.spacing(2),
-    paddingTop: 0,
-    minHeight: theme.spacing(40),
-    width: '100%',
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(1),
   },
   switch: {
     paddingBottom: theme.spacing(1),
@@ -218,6 +218,7 @@ function DefaultTheme(props) {
   const [checked, setChecked] = React.useState(false);
   const [expandPaths, setExpandPaths] = React.useState(null);
   const t = useSelector(state => state.options.t);
+  const [darkTheme, setDarkTheme] = React.useState(false);
 
   React.useEffect(() => {
     const URL = url.parse(document.location.href, true);
@@ -240,7 +241,9 @@ function DefaultTheme(props) {
     );
   }, []);
 
-  const data = React.useMemo(createMuiTheme, []);
+  const data = React.useMemo(() => {
+    return createMuiTheme({ palette: { type: darkTheme ? 'dark' : 'light' } });
+  }, [darkTheme]);
 
   const allNodeIds = useNodeIdsLazy(data);
   React.useDebugValue(allNodeIds);
@@ -266,7 +269,19 @@ function DefaultTheme(props) {
         }
         label={t('expandAll')}
       />
-      <Inspector data={data} expandPaths={expandPaths} expandLevel={checked ? 100 : 1} />
+      <FormControlLabel
+        className={classes.switch}
+        control={
+          <Switch
+            checked={darkTheme}
+            onChange={(event, newValue) => {
+              setDarkTheme(newValue);
+            }}
+          />
+        }
+        label={t('useDarkTheme')}
+      />
+      <Inspector className={classes.inspector} data={data} expandPaths={expandPaths} />
     </div>
   );
 }

docs/src/pages/customization/default-theme/default-theme.md

@@ -4,13 +4,13 @@
 
 ## Explore
 
-Explore the documentation theme object:
+Explore the default theme object:
 
-{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
+{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true, "bg": "inline"}}
 
-> Tip: you can play with the documentation theme object in **your console**,
-as the `theme` variable is exposed on all the documentation pages.
-Please note that the documentation site is using a custom theme.
+> Tip: you can play with the documentation theme object in your browser console,
+> as the `theme` variable is exposed on all the documentation pages.
+> Please note that **the documentation site is using a custom theme**.
 
 If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js),
 and the related imports which `createMuiTheme` uses.

docs/src/pages/customization/palette/DarkTheme.js

@@ -1,34 +1,90 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
 import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    padding: theme.spacing(3),
-    textAlign: 'center',
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
+    padding: theme.spacing(2),
+    [theme.breakpoints.up('md')]: {
+      padding: theme.spacing(3),
+    },
+  },
+  group: {
+    marginTop: theme.spacing(3),
+  },
+  color: {
+    display: 'flex',
+    alignItems: 'center',
+    '& div:first-of-type': {
+      width: theme.spacing(6),
+      height: theme.spacing(6),
+      flexShrink: 0,
+      marginRight: theme.spacing(1),
+      borderRadius: theme.shape.borderRadius,
+    },
   },
 }));
 
 function Demo() {
   const classes = useStyles();
   const theme = useTheme();
 
+  const item = (color, name, expanded = false, border = false) => (
+    <Grid item xs={12} sm={6} md={expanded ? 8 : 4} className={classes.color}>
+      <div
+        style={{
+          backgroundColor: color,
+          border: border ? `1px solid ${theme.palette.divider}` : undefined,
+        }}
+      />
+      <div>
+        <Typography variant="body2">{name}</Typography>
+        <Typography variant="body2" color="textSecondary">
+          {color}
+        </Typography>
+      </div>
+    </Grid>
+  );
+
   return (
     <div className={classes.root}>
-      <Typography>{`${theme.palette.type} theme`}</Typography>
+      <Typography gutterBottom>Typography</Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.text.primary, 'palette.text.primary')}
+        {item(theme.palette.text.secondary, 'palette.text.secondary')}
+        {item(theme.palette.text.disabled, 'palette.text.disabled')}
+      </Grid>
+      <Typography gutterBottom className={classes.group}>
+        Buttons
+      </Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.action.active, 'palette.action.active')}
+        {item(theme.palette.action.hover, 'palette.action.hover')}
+        {item(theme.palette.action.selected, 'palette.action.selected')}
+        {item(theme.palette.action.disabled, 'palette.action.disabled')}
+        {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground', true)}
+      </Grid>
+      <Typography gutterBottom className={classes.group}>
+        Background
+      </Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.background.default, 'palette.background.default', false, true)}
+        {item(theme.palette.background.paper, 'palette.background.paper')}
+      </Grid>
+      <Typography gutterBottom className={classes.group}>
+        Divider
+      </Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.divider, 'palette.divider')}
+      </Grid>
     </div>
   );
 }
 
-const lightTheme = createMuiTheme({
-  palette: {
-    // This is the default, so only included for comparison.
-    type: 'light',
-  },
-});
-
+const lightTheme = createMuiTheme();
 const darkTheme = createMuiTheme({
   palette: {
     // Switching the dark mode on is a single property value change.

docs/src/pages/customization/palette/Intentions.js

@@ -6,7 +6,6 @@ import { makeStyles, useTheme, rgbToHex } from '@material-ui/core/styles';
 const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
-    maxWidth: 600,
   },
   group: {
     marginTop: theme.spacing(3),
@@ -28,7 +27,7 @@ export default function Intentions() {
   const theme = useTheme();
 
   const item = (color, name) => (
-    <Grid item xs={6} sm={4} className={classes.color}>
+    <Grid item xs={12} sm={6} md={4} className={classes.color}>
       <div style={{ backgroundColor: color }} />
       <div>
         <Typography variant="body2">{name}</Typography>
@@ -44,50 +43,50 @@ export default function Intentions() {
       <Typography gutterBottom className={classes.group}>
         Primary
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.primary.light, 'light')}
-        {item(theme.palette.primary.main, 'main')}
-        {item(theme.palette.primary.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.primary.light, 'palette.primary.light')}
+        {item(theme.palette.primary.main, 'palette.primary.main')}
+        {item(theme.palette.primary.dark, 'palette.primary.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Secondary
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.secondary.light, 'light')}
-        {item(theme.palette.secondary.main, 'main')}
-        {item(theme.palette.secondary.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.secondary.light, 'palette.secondary.light')}
+        {item(theme.palette.secondary.main, 'palette.secondary.main')}
+        {item(theme.palette.secondary.dark, 'palette.secondary.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Error
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.error.light, 'light')}
-        {item(theme.palette.error.main, 'main')}
-        {item(theme.palette.error.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.error.light, 'palette.error.light')}
+        {item(theme.palette.error.main, 'palette.error.main')}
+        {item(theme.palette.error.dark, 'palette.error.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Warning
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.warning.light, 'light')}
-        {item(theme.palette.warning.main, 'main')}
-        {item(theme.palette.warning.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.warning.light, 'palette.warning.light')}
+        {item(theme.palette.warning.main, 'palette.warning.main')}
+        {item(theme.palette.warning.dark, 'palette.warning.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Info
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.info.light, 'light')}
-        {item(theme.palette.info.main, 'main')}
-        {item(theme.palette.info.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.info.light, 'palette.info.light')}
+        {item(theme.palette.info.main, 'palette.info.main')}
+        {item(theme.palette.info.dark, 'palette.info.dark')}
       </Grid>
       <Typography gutterBottom className={classes.group}>
         Success
       </Typography>
-      <Grid container spacing={1}>
-        {item(theme.palette.success.light, 'light')}
-        {item(theme.palette.success.main, 'main')}
-        {item(theme.palette.success.dark, 'dark')}
+      <Grid container spacing={2}>
+        {item(theme.palette.success.light, 'palette.success.light')}
+        {item(theme.palette.success.main, 'palette.success.main')}
+        {item(theme.palette.success.dark, 'palette.success.dark')}
       </Grid>
     </div>
   );