Skip to content

Commit

Permalink
[docs] Improve the documentation of the dark theme (#19122)
Browse files Browse the repository at this point in the history
  • Loading branch information
@m4theushw @oliviertassinari
m4theushw authored and oliviertassinari committed Jan 13, 2020
1 parent 70de398 commit 5633c27
Show file tree
Hide file tree
Showing 14 changed files with 129 additions and 225 deletions.
2 changes: 1 addition & 1 deletion docs/src/modules/components/MarkdownElement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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': {
Expand Down
33 changes: 24 additions & 9 deletions docs/src/pages/customization/default-theme/DefaultTheme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -153,6 +153,7 @@ function Inspector(props) {
defaultEndIcon={<div style={{ width: 24 }} />}
defaultExpanded={defaultExpanded}
defaultExpandIcon={<CollapseIcon />}
{...other}
>
{Object.keys(data).map(objectKey => {
return (
Expand All @@ -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),
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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>
);
}
Expand Down
10 changes: 5 additions & 5 deletions docs/src/pages/customization/default-theme/default-theme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
76 changes: 66 additions & 10 deletions docs/src/pages/customization/palette/DarkTheme.js
View file
Original file line number Diff line number Diff line change
@@ -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.
Expand Down
59 changes: 0 additions & 59 deletions docs/src/pages/customization/palette/DarkTheme.tsx
View file

This file was deleted.

51 changes: 25 additions & 26 deletions docs/src/pages/customization/palette/Intentions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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>
Expand All @@ -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>
);
Expand Down
Loading

0 comments on commit 5633c27

Please sign in to comment.