Skip to content

Commit 7dd106e

Browse files
siriwatknpsiriwatknp
authored
[docs] Fix Breadcrumbs, List, Divider, and Typography dark mode demos (#45692)
1 parent 9069814 commit 7dd106e

10 files changed

+50
-28
lines changed

‎docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js

+13-8
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,27 @@ import HomeIcon from '@mui/icons-material/Home';
66
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
77

88
const StyledBreadcrumb = styled(Chip)(({ theme }) => {
9-
const backgroundColor =
10-
theme.palette.mode === 'light'
11-
? theme.palette.grey[100]
12-
: theme.palette.grey[800];
139
return {
14-
backgroundColor,
10+
backgroundColor: theme.palette.grey[100],
1511
height: theme.spacing(3),
16-
color: theme.palette.text.primary,
12+
color: (theme.vars || theme).palette.text.primary,
1713
fontWeight: theme.typography.fontWeightRegular,
1814
'&:hover, &:focus': {
19-
backgroundColor: emphasize(backgroundColor, 0.06),
15+
backgroundColor: emphasize(theme.palette.grey[100], 0.06),
16+
...theme.applyStyles('dark', {
17+
backgroundColor: emphasize(theme.palette.grey[800], 0.06),
18+
}),
2019
},
2120
'&:active': {
2221
boxShadow: theme.shadows[1],
23-
backgroundColor: emphasize(backgroundColor, 0.12),
22+
backgroundColor: emphasize(theme.palette.grey[100], 0.12),
23+
...theme.applyStyles('dark', {
24+
backgroundColor: emphasize(theme.palette.grey[800], 0.12),
25+
}),
2426
},
27+
...theme.applyStyles('dark', {
28+
backgroundColor: theme.palette.grey[800],
29+
}),
2530
};
2631
}); // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
2732

‎docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx

+13-8
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,27 @@ import HomeIcon from '@mui/icons-material/Home';
66
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
77

88
const StyledBreadcrumb = styled(Chip)(({ theme }) => {
9-
const backgroundColor =
10-
theme.palette.mode === 'light'
11-
? theme.palette.grey[100]
12-
: theme.palette.grey[800];
139
return {
14-
backgroundColor,
10+
backgroundColor: theme.palette.grey[100],
1511
height: theme.spacing(3),
16-
color: theme.palette.text.primary,
12+
color: (theme.vars || theme).palette.text.primary,
1713
fontWeight: theme.typography.fontWeightRegular,
1814
'&:hover, &:focus': {
19-
backgroundColor: emphasize(backgroundColor, 0.06),
15+
backgroundColor: emphasize(theme.palette.grey[100], 0.06),
16+
...theme.applyStyles('dark', {
17+
backgroundColor: emphasize(theme.palette.grey[800], 0.06),
18+
}),
2019
},
2120
'&:active': {
2221
boxShadow: theme.shadows[1],
23-
backgroundColor: emphasize(backgroundColor, 0.12),
22+
backgroundColor: emphasize(theme.palette.grey[100], 0.12),
23+
...theme.applyStyles('dark', {
24+
backgroundColor: emphasize(theme.palette.grey[800], 0.12),
25+
}),
2426
},
27+
...theme.applyStyles('dark', {
28+
backgroundColor: theme.palette.grey[800],
29+
}),
2530
};
2631
}) as typeof Chip; // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
2732

‎docs/data/material/components/breadcrumbs/PageContainerBasic.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { styled, useTheme } from '@mui/material/styles';
2+
import { styled, createTheme } from '@mui/material/styles';
33
import DashboardIcon from '@mui/icons-material/Dashboard';
44
import { AppProvider } from '@toolpad/core/AppProvider';
55
import {
@@ -73,18 +73,24 @@ function CustomPageHeader() {
7373
return <PageHeader slots={{ toolbar: CustomPageToolbar }} />;
7474
}
7575

76+
const demoTheme = createTheme({
77+
colorSchemes: { light: true, dark: true },
78+
cssVariables: {
79+
colorSchemeSelector: 'data-mui-color-scheme',
80+
},
81+
});
82+
7683
export default function PageContainerBasic(props) {
7784
const { window } = props;
7885
const router = useDemoRouter('/inbox/all');
79-
const theme = useTheme();
8086
// Remove this const when copying and pasting into your project.
8187
const demoWindow = window ? window() : undefined;
8288

8389
return (
8490
<AppProvider
8591
navigation={NAVIGATION}
8692
router={router}
87-
theme={theme}
93+
theme={demoTheme}
8894
window={demoWindow}
8995
branding={{
9096
title: 'ACME Inc.',

‎docs/data/material/components/breadcrumbs/PageContainerBasic.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { styled, useTheme } from '@mui/material/styles';
2+
import { styled, createTheme } from '@mui/material/styles';
33
import DashboardIcon from '@mui/icons-material/Dashboard';
44
import { AppProvider, Navigation, Router } from '@toolpad/core/AppProvider';
55
import {
@@ -73,18 +73,24 @@ function CustomPageHeader() {
7373
return <PageHeader slots={{ toolbar: CustomPageToolbar }} />;
7474
}
7575

76+
const demoTheme = createTheme({
77+
colorSchemes: { light: true, dark: true },
78+
cssVariables: {
79+
colorSchemeSelector: 'data-mui-color-scheme',
80+
},
81+
});
82+
7683
export default function PageContainerBasic(props: any) {
7784
const { window } = props;
7885
const router = useDemoRouter('/inbox/all');
79-
const theme = useTheme();
8086
// Remove this const when copying and pasting into your project.
8187
const demoWindow = window ? window() : undefined;
8288

8389
return (
8490
<AppProvider
8591
navigation={NAVIGATION}
8692
router={router}
87-
theme={theme}
93+
theme={demoTheme}
8894
window={demoWindow}
8995
branding={{
9096
title: 'ACME Inc.',

‎docs/data/material/components/dividers/DividerText.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Chip from '@mui/material/Chip';
66
const Root = styled('div')(({ theme }) => ({
77
width: '100%',
88
...theme.typography.body2,
9-
color: theme.palette.text.secondary,
9+
color: (theme.vars || theme).palette.text.secondary,
1010
'& > :not(style) ~ :not(style)': {
1111
marginTop: theme.spacing(2),
1212
},

‎docs/data/material/components/dividers/DividerText.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Chip from '@mui/material/Chip';
66
const Root = styled('div')(({ theme }) => ({
77
width: '100%',
88
...theme.typography.body2,
9-
color: theme.palette.text.secondary,
9+
color: (theme.vars || theme).palette.text.secondary,
1010
'& > :not(style) ~ :not(style)': {
1111
marginTop: theme.spacing(2),
1212
},

‎docs/data/material/components/lists/InteractiveList.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function generate(element) {
2525
}
2626

2727
const Demo = styled('div')(({ theme }) => ({
28-
backgroundColor: theme.palette.background.paper,
28+
backgroundColor: (theme.vars || theme).palette.background.paper,
2929
}));
3030

3131
export default function InteractiveList() {

‎docs/data/material/components/lists/InteractiveList.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function generate(element: React.ReactElement<unknown>) {
2525
}
2626

2727
const Demo = styled('div')(({ theme }) => ({
28-
backgroundColor: theme.palette.background.paper,
28+
backgroundColor: (theme.vars || theme).palette.background.paper,
2929
}));
3030

3131
export default function InteractiveList() {

‎docs/data/material/components/typography/TypographyTheme.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles';
33

44
const Div = styled('div')(({ theme }) => ({
55
...theme.typography.button,
6-
backgroundColor: theme.palette.background.paper,
6+
backgroundColor: (theme.vars || theme).palette.background.paper,
77
padding: theme.spacing(1),
88
}));
99

‎docs/data/material/components/typography/TypographyTheme.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles';
33

44
const Div = styled('div')(({ theme }) => ({
55
...theme.typography.button,
6-
backgroundColor: theme.palette.background.paper,
6+
backgroundColor: (theme.vars || theme).palette.background.paper,
77
padding: theme.spacing(1),
88
}));
99

0 commit comments

Comments
 (0)