diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
index cbe14be6bd157e..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),
@@ -281,7 +281,7 @@ function DefaultTheme(props) {
         }
         label={t('useDarkTheme')}
       />
-      <Inspector data={data} expandPaths={expandPaths} expandLevel={checked ? 100 : 1} />
+      <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 70ab06d0d05067..62209a223ab7c7 100644
--- a/docs/src/pages/customization/default-theme/default-theme.md
+++ b/docs/src/pages/customization/default-theme/default-theme.md
@@ -6,7 +6,7 @@
 
 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 browser console,
 > as the `theme` variable is exposed on all the documentation pages.
diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
index dccdb8eba41fd4..8d0bf985195548 100644
--- a/docs/src/pages/customization/palette/DarkTheme.js
+++ b/docs/src/pages/customization/palette/DarkTheme.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
 
@@ -8,13 +7,13 @@ const useStyles = makeStyles(theme => ({
   root: {
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
-    overflow: 'auto',
+    padding: theme.spacing(2),
     [theme.breakpoints.up('md')]: {
       padding: theme.spacing(3),
     },
   },
-  paper: {
-    padding: theme.spacing(3),
+  group: {
+    marginTop: theme.spacing(3),
   },
   color: {
     display: 'flex',
@@ -22,13 +21,11 @@ const useStyles = makeStyles(theme => ({
     '& div:first-of-type': {
       width: theme.spacing(6),
       height: theme.spacing(6),
+      flexShrink: 0,
       marginRight: theme.spacing(1),
       borderRadius: theme.shape.borderRadius,
     },
   },
-  group: {
-    marginTop: theme.spacing(3),
-  },
 }));
 
 function Demo() {
@@ -36,7 +33,7 @@ function Demo() {
   const theme = useTheme();
 
   const item = (color, name, expanded = false, border = false) => (
-    <Grid item xs={12} md={expanded ? 8 : 4} className={classes.color}>
+    <Grid item xs={12} sm={6} md={expanded ? 8 : 4} className={classes.color}>
       <div
         style={{
           backgroundColor: color,
@@ -54,50 +51,40 @@ function Demo() {
 
   return (
     <div className={classes.root}>
-      <Paper className={classes.paper}>
-        <Typography gutterBottom>Typography</Typography>
-        <Grid container spacing={2}>
-          {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={2}>
-          {item(theme.palette.action.active, 'palette.action.active')}
-          {item(theme.palette.action.hover, 'palette.action.hover')}
-          {item(theme.palette.action.selected, 'palette.action.selected')}
-        </Grid>
-        <Grid container spacing={2}>
-          {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={2}>
-          {item(theme.palette.background.default, 'palette.background.default', false)}
-          {item(theme.palette.background.paper, 'palette.background.paper', false, true)}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Divider
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.divider, 'palette.divider')}
-        </Grid>
-      </Paper>
+      <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 5d4c89d3cc10dc..00000000000000
--- a/docs/src/pages/customization/palette/DarkTheme.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
-import Grid from '@material-ui/core/Grid';
-import {
-  createStyles,
-  makeStyles,
-  ThemeProvider,
-  useTheme,
-  createMuiTheme,
-  Theme,
-} from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      backgroundColor: theme.palette.background.default,
-      color: theme.palette.text.primary,
-      overflow: 'auto',
-      [theme.breakpoints.up('md')]: {
-        padding: theme.spacing(3),
-      },
-    },
-    paper: {
-      padding: 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,
-      },
-    },
-    group: {
-      marginTop: theme.spacing(3),
-    },
-  }),
-);
-
-function Demo() {
-  const classes = useStyles();
-  const theme = useTheme();
-
-  const item = (
-    color: string,
-    name: string,
-    expanded: boolean = false,
-    border: boolean = false,
-  ) => (
-    <Grid item xs={12} 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}>
-      <Paper className={classes.paper}>
-        <Typography gutterBottom>Typography</Typography>
-        <Grid container spacing={2}>
-          {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={2}>
-          {item(theme.palette.action.active, 'palette.action.active')}
-          {item(theme.palette.action.hover, 'palette.action.hover')}
-          {item(theme.palette.action.selected, 'palette.action.selected')}
-        </Grid>
-        <Grid container spacing={2}>
-          {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={2}>
-          {item(theme.palette.background.default, 'palette.background.default', false)}
-          {item(theme.palette.background.paper, 'palette.background.paper', false, true)}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Divider
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.divider, 'palette.divider')}
-        </Grid>
-      </Paper>
-    </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 e83cea6301f983..1d0d8825b95574 100644
--- a/docs/src/pages/customization/palette/Intentions.js
+++ b/docs/src/pages/customization/palette/Intentions.js
@@ -1,12 +1,11 @@
 import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles, createMuiTheme, rgbToHex } from '@material-ui/core/styles';
+import { makeStyles, useTheme, rgbToHex } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
-    maxWidth: 600,
   },
   group: {
     marginTop: theme.spacing(3),
@@ -25,10 +24,10 @@ const useStyles = makeStyles(theme => ({
 
 export default function Intentions() {
   const classes = useStyles();
-  const theme = createMuiTheme();
+  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 c99ca2c3f2cb9e..00000000000000
--- a/docs/src/pages/customization/palette/Intentions.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import {
-  createStyles,
-  makeStyles,
-  Theme,
-  createMuiTheme,
-  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 = createMuiTheme();
-
-  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/system/palette/BackgroundColor.js b/docs/src/pages/system/palette/BackgroundColor.js
index 9a983c5daf15e8..891d93ed2d28e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.js
+++ b/docs/src/pages/system/palette/BackgroundColor.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-function Demo() {
+export default function BackgroundColor() {
   return (
     <Grid container spacing={1}>
       <Grid item xs={12} sm={4}>
@@ -54,13 +53,3 @@ function Demo() {
     </Grid>
   );
 }
-
-const theme = createMuiTheme();
-
-export default function BackgroundColor() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Demo />
-    </ThemeProvider>
-  );
-}
diff --git a/docs/src/pages/system/palette/BackgroundColor.tsx b/docs/src/pages/system/palette/BackgroundColor.tsx
index 9a983c5daf15e8..891d93ed2d28e8 100644
--- a/docs/src/pages/system/palette/BackgroundColor.tsx
+++ b/docs/src/pages/system/palette/BackgroundColor.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
 import Grid from '@material-ui/core/Grid';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-function Demo() {
+export default function BackgroundColor() {
   return (
     <Grid container spacing={1}>
       <Grid item xs={12} sm={4}>
@@ -54,13 +53,3 @@ function Demo() {
     </Grid>
   );
 }
-
-const theme = createMuiTheme();
-
-export default function BackgroundColor() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Demo />
-    </ThemeProvider>
-  );
-}
diff --git a/docs/src/pages/system/palette/Color.js b/docs/src/pages/system/palette/Color.js
index e582974eade037..bc46160352de93 100644
--- a/docs/src/pages/system/palette/Color.js
+++ b/docs/src/pages/system/palette/Color.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-function Demo() {
+export default function Color() {
   return (
     <Typography component="div" variant="body1">
       <Box color="primary.main">primary.main</Box>
@@ -18,13 +17,3 @@ function Demo() {
     </Typography>
   );
 }
-
-const theme = createMuiTheme();
-
-export default function Color() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Demo />
-    </ThemeProvider>
-  );
-}
diff --git a/docs/src/pages/system/palette/Color.tsx b/docs/src/pages/system/palette/Color.tsx
index e582974eade037..bc46160352de93 100644
--- a/docs/src/pages/system/palette/Color.tsx
+++ b/docs/src/pages/system/palette/Color.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
-import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 
-function Demo() {
+export default function Color() {
   return (
     <Typography component="div" variant="body1">
       <Box color="primary.main">primary.main</Box>
@@ -18,13 +17,3 @@ function Demo() {
     </Typography>
   );
 }
-
-const theme = createMuiTheme();
-
-export default function Color() {
-  return (
-    <ThemeProvider theme={theme}>
-      <Demo />
-    </ThemeProvider>
-  );
-}