Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 13 commits into from
Jan 13, 2020
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1aff23f
[docs] Make inspector aware of current theme
m4theushw Jan 7, 2020
67033d5
Add toggle to show dark theme values
m4theushw Jan 8, 2020
2f07fec
Add color swatches
m4theushw Jan 8, 2020
7ec1092
Remove unused import
m4theushw Jan 8, 2020
105c214
Add TypeScript demo
m4theushw Jan 8, 2020
d436fad
Add more colors and group names
m4theushw Jan 9, 2020
5041d6a
Minor tweaks
m4theushw Jan 9, 2020
c4544cc
Minor tweaks
m4theushw Jan 9, 2020
6d64407
Add missing space
m4theushw Jan 9, 2020
7ac20de
Remove mentions to 'palette.text.hint'
m4theushw Jan 9, 2020
fb7bcb7
Use default theme
m4theushw Jan 9, 2020
467807c
Use palette.divider color
m4theushw Jan 9, 2020
313505b
polishing
oliviertassinari Jan 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions docs/src/pages/customization/default-theme/DefaultTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ import CollapseIcon from '@material-ui/icons/ChevronRight';
import TreeView from '@material-ui/lab/TreeView';
import TreeItem from '@material-ui/lab/TreeItem';
import clsx from 'clsx';
import { makeStyles, withStyles, createMuiTheme, lighten } from '@material-ui/core/styles';
import {
makeStyles,
withStyles,
createMuiTheme,
lighten,
useTheme,
} from '@material-ui/core/styles';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

Expand Down Expand Up @@ -218,6 +224,7 @@ function DefaultTheme(props) {
const [checked, setChecked] = React.useState(false);
const [expandPaths, setExpandPaths] = React.useState(null);
const t = useSelector(state => state.options.t);
const { palette } = useTheme();

React.useEffect(() => {
const URL = url.parse(document.location.href, true);
Expand All @@ -240,7 +247,9 @@ function DefaultTheme(props) {
);
}, []);

const data = React.useMemo(createMuiTheme, []);
const data = React.useMemo(() => {
return createMuiTheme({ palette: { type: palette.type } });
}, [palette.type]);

const allNodeIds = useNodeIdsLazy(data);
React.useDebugValue(allNodeIds);
Expand Down
2 changes: 2 additions & 0 deletions docs/src/pages/customization/default-theme/default-theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ Explore the documentation theme object:

{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}

> Tip: toggle between light/dark to see above how Material-UI uses different colors for each theme.

> 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.
Expand Down