diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 91a4a90983c91f..054f9e2674b34e 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -237,7 +237,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': {
diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
index 7dbea9b8b0886a..8116b0a84551a7 100644
--- a/docs/src/pages/customization/default-theme/DefaultTheme.js
+++ b/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>
   );
 }
diff --git a/docs/src/pages/customization/default-theme/default-theme.md b/docs/src/pages/customization/default-theme/default-theme.md
index 99d6ef8cbfa701..62209a223ab7c7 100644
--- a/docs/src/pages/customization/default-theme/default-theme.md
+++ b/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.
diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index 016f871c29a8dd..8d0bf985195548 100644
--- a/docs/src/pages/customization/palette/DarkTheme.js
+++ b/docs/src/pages/customization/palette/DarkTheme.js
@@ -1,13 +1,30 @@
 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,
+    },
   },
 }));
 
@@ -15,20 +32,59 @@ 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.
diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx
deleted file mode 100644
index dd6567535372bf..00000000000000
--- a/docs/src/pages/customization/palette/DarkTheme.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import {
-  createStyles,
-  makeStyles,
-  ThemeProvider,
-  useTheme,
-  createMuiTheme,
-  Theme,
-} from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      padding: theme.spacing(3),
-      textAlign: 'center',
-      backgroundColor: theme.palette.background.default,
-      color: theme.palette.text.primary,
-    },
-  }),
-);
-
-function Demo() {
-  const classes = useStyles();
-  const theme = useTheme();
-
-  return (
-    <div className={classes.root}>
-      <Typography>{`${theme.palette.type} theme`}</Typography>
-    </div>
-  );
-}
-
-const lightTheme = createMuiTheme({
-  palette: {
-    // This is the default, so only included for comparison.
-    type: 'light',
-  },
-});
-
-const darkTheme = createMuiTheme({
-  palette: {
-    // Switching the dark mode on is a single property value change.
-    type: 'dark',
-  },
-});
-
-export default function DarkTheme() {
-  return (
-    <div style={{ width: '100%' }}>
-      <ThemeProvider theme={darkTheme}>
-        <Demo />
-      </ThemeProvider>
-      <ThemeProvider theme={lightTheme}>
-        <Demo />
-      </ThemeProvider>
-    </div>
-  );
-}
diff --git a/docs/src/pages/customization/palette/Intentions.js b/docs/src/pages/customization/palette/Intentions.js
index 55686fb308f16c..1d0d8825b95574 100644
--- a/docs/src/pages/customization/palette/Intentions.js
+++ b/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>
   );
diff --git a/docs/src/pages/customization/palette/Intentions.tsx b/docs/src/pages/customization/palette/Intentions.tsx
deleted file mode 100644
index 8e2a203a3fa426..00000000000000
--- a/docs/src/pages/customization/palette/Intentions.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { createStyles, makeStyles, Theme, useTheme, rgbToHex } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      maxWidth: 600,
-    },
-    group: {
-      marginTop: theme.spacing(3),
-    },
-    color: {
-      display: 'flex',
-      alignItems: 'center',
-      '& div:first-of-type': {
-        width: theme.spacing(6),
-        height: theme.spacing(6),
-        marginRight: theme.spacing(1),
-        borderRadius: theme.shape.borderRadius,
-      },
-    },
-  }),
-);
-
-export default function Intentions() {
-  const classes = useStyles();
-  const theme = useTheme();
-
-  const item = (color: string, name: string) => (
-    <Grid item xs={6} sm={4} className={classes.color}>
-      <div style={{ backgroundColor: color }} />
-      <div>
-        <Typography variant="body2">{name}</Typography>
-        <Typography variant="body2" color="textSecondary">
-          {rgbToHex(color)}
-        </Typography>
-      </div>
-    </Grid>
-  );
-
-  return (
-    <div className={classes.root}>
-      <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>
-      <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>
-      <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>
-      <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>
-      <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>
-      <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>
-    </div>
-  );
-}
diff --git a/docs/src/pages/customization/palette/palette.md b/docs/src/pages/customization/palette/palette.md
index 5ca6c7e574443d..c464833dfbc414 100644
--- a/docs/src/pages/customization/palette/palette.md
+++ b/docs/src/pages/customization/palette/palette.md
@@ -19,7 +19,7 @@ and the un-prefixed shades for the other intentions.
 
 If you want to learn more about color, you can check out [the color section](/customization/color/).
 
-{{"demo": "pages/customization/palette/Intentions.js", "bg": "inline"}}
+{{"demo": "pages/customization/palette/Intentions.js", "bg": "inline", "hideHeader": true}}
 
 ### Customization
 
@@ -41,7 +41,7 @@ interface PaletteIntention {
   main: string;
   dark?: string;
   contrastText?: string;
-};
+}
 ```
 
 **Using a color object**
@@ -97,9 +97,9 @@ As in the example above, if the intention object contains custom colors using an
 "main", "light", "dark" or "contrastText" keys, these map as follows:
 
 - If the "dark" and / or "light" keys are omitted, their value(s) will be calculated from "main",
-according to the "tonalOffset" value.
+  according to the "tonalOffset" value.
 - If "contrastText" is omitted, its value will be calculated to contrast with "main",
-according to the"contrastThreshold" value.
+  according to the "contrastThreshold" value.
 
 Both the "tonalOffset" and "contrastThreshold" values may be customized as needed.
 A higher value for "tonalOffset" will make calculated values for "light" lighter, and "dark" darker.
@@ -130,7 +130,9 @@ const darkTheme = createMuiTheme({
 });
 ```
 
-{{"demo": "pages/customization/palette/DarkTheme.js", "bg": "inline", "defaultCodeOpen": false}}
+The colors modified by the palette type are the following:
+
+{{"demo": "pages/customization/palette/DarkTheme.js", "bg": "inline", "hideHeader": true}}
 
 ### User preference
 
diff --git a/docs/src/pages/system/palette/BackgroundColor.js b/docs/src/pages/system/palette/BackgroundColor.js
index 8fb08e68943624..891d93ed2d28e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.js
+++ b/docs/src/pages/system/palette/BackgroundColor.js
@@ -50,11 +50,6 @@ export default function BackgroundColor() {
           text.disabled
         </Box>
       </Grid>
-      <Grid item xs={12} sm={4}>
-        <Box bgcolor="text.hint" color="background.paper" p={2}>
-          text.hint
-        </Box>
-      </Grid>
     </Grid>
   );
 }
diff --git a/docs/src/pages/system/palette/BackgroundColor.tsx b/docs/src/pages/system/palette/BackgroundColor.tsx
index 8fb08e68943624..891d93ed2d28e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.tsx
+++ b/docs/src/pages/system/palette/BackgroundColor.tsx
@@ -50,11 +50,6 @@ export default function BackgroundColor() {
           text.disabled
         </Box>
       </Grid>
-      <Grid item xs={12} sm={4}>
-        <Box bgcolor="text.hint" color="background.paper" p={2}>
-          text.hint
-        </Box>
-      </Grid>
     </Grid>
   );
 }
diff --git a/docs/src/pages/system/palette/Color.js b/docs/src/pages/system/palette/Color.js
index 92bc186fea95ac..bc46160352de93 100644
--- a/docs/src/pages/system/palette/Color.js
+++ b/docs/src/pages/system/palette/Color.js
@@ -14,7 +14,6 @@ export default function Color() {
       <Box color="text.primary">text.primary</Box>
       <Box color="text.secondary">text.secondary</Box>
       <Box color="text.disabled">text.disabled</Box>
-      <Box color="text.hint">text.hint</Box>
     </Typography>
   );
 }
diff --git a/docs/src/pages/system/palette/Color.tsx b/docs/src/pages/system/palette/Color.tsx
index 92bc186fea95ac..bc46160352de93 100644
--- a/docs/src/pages/system/palette/Color.tsx
+++ b/docs/src/pages/system/palette/Color.tsx
@@ -14,7 +14,6 @@ export default function Color() {
       <Box color="text.primary">text.primary</Box>
       <Box color="text.secondary">text.secondary</Box>
       <Box color="text.disabled">text.disabled</Box>
-      <Box color="text.hint">text.hint</Box>
     </Typography>
   );
 }
diff --git a/docs/src/pages/system/palette/palette.md b/docs/src/pages/system/palette/palette.md
index 34fc479a46c5cf..3e9d54e8620cd5 100644
--- a/docs/src/pages/system/palette/palette.md
+++ b/docs/src/pages/system/palette/palette.md
@@ -16,7 +16,6 @@
 <Box color="text.primary">…
 <Box color="text.secondary">…
 <Box color="text.disabled">…
-<Box color="text.hint">…
 ```
 
 ## Background color
@@ -33,7 +32,6 @@
 <Box bgcolor="text.primary">…
 <Box bgcolor="text.secondary">…
 <Box bgcolor="text.disabled">…
-<Box bgcolor="text.hint">…
 ```
 
 ## API
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 5e38a22e8b5335..f51d4cfcb20784 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -2,6 +2,7 @@
   "homeQuickWord": "A quick word from our sponsors:",
   "helpToTranslate": "Help to translate",
   "editWebsiteColors": "Edit website colors",
+  "useDarkTheme": "Use dark theme",
   "toggleTheme": "Toggle light/dark theme",
   "toggleRTL": "Toggle right-to-left/left-to-right",
   "github": "GitHub repository",