Skip to content

Commit 4812b61

Browse files
zanivanDiegoAndaiaarongarciah
authored
[material-ui] Refine and unify custom template themes (#43220)
Co-authored-by: DiegoAndai <[email protected]> Co-authored-by: Aarón García Hervás <[email protected]>
1 parent 14b615e commit 4812b61

File tree

206 files changed

+19080
-8521
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

206 files changed

+19080
-8521
lines changed

‎.circleci/config.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,12 @@ jobs:
299299
command: |
300300
pnpm docs:link-check
301301
git add -A && git diff --exit-code --staged
302+
- run:
303+
name: Update the templates shared themes
304+
command: pnpm template:update-theme
305+
- run:
306+
name: '`pnpm template:update-theme` changes committed?'
307+
command: git add -A && git diff --exit-code --staged
302308
test_types:
303309
<<: *default-job
304310
resource_class: 'medium+'

‎benchmark/server/scenarios/server.js

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
createGenerateClassName,
1212
} from '@mui/styles';
1313
import { green, red } from '@mui/material/colors';
14-
import Pricing from 'docs/data/material/getting-started/templates/pricing/Pricing';
1514
import { spacing, palette, unstable_styleFunctionSx as styleFunction } from '@mui/system';
1615
import Avatar from '@mui/material/Avatar';
1716
import Box from '@mui/material/Box';
@@ -42,23 +41,6 @@ const theme = createTheme({
4241
},
4342
});
4443

45-
function renderPricing(req, res) {
46-
const sheetsRegistry = new SheetsRegistry();
47-
const html = ReactDOMServer.renderToString(
48-
<StylesProvider
49-
sheetsRegistry={sheetsRegistry}
50-
generateClassName={createGenerateClassName()}
51-
sheetsManager={new Map()}
52-
>
53-
<ThemeProvider theme={theme}>
54-
<Pricing />
55-
</ThemeProvider>
56-
</StylesProvider>,
57-
);
58-
const css = sheetsRegistry.toString();
59-
res.send(renderFullPage(html, css));
60-
}
61-
6244
function renderBox(req, res) {
6345
const sheetsRegistry = new SheetsRegistry();
6446
const html = ReactDOMServer.renderToString(
@@ -156,7 +138,6 @@ function renderSystem(req, res) {
156138
}
157139

158140
const app = express();
159-
app.get('/', renderPricing);
160141
app.get('/spacing', renderSpacing);
161142
app.get('/palette', renderPalette);
162143
app.get('/system', renderSystem);

‎docs/data/material/getting-started/templates/blog/Blog.js

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,26 @@ export default function Blog() {
6565
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
6666
const blogTheme = createTheme(getBlogTheme(mode));
6767
const defaultTheme = createTheme({ palette: { mode } });
68+
// This code only runs on the client side, to determine the system color preference
69+
React.useEffect(() => {
70+
// Check if there is a preferred mode in localStorage
71+
const savedMode = localStorage.getItem('themeMode');
72+
if (savedMode) {
73+
setMode(savedMode);
74+
} else {
75+
// If no preference is found, it uses system preference
76+
const systemPrefersDark = window.matchMedia(
77+
'(prefers-color-scheme: dark)',
78+
).matches;
79+
setMode(systemPrefersDark ? 'dark' : 'light');
80+
}
81+
}, []);
6882

6983
const toggleColorMode = () => {
70-
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
84+
const newMode = mode === 'dark' ? 'light' : 'dark';
85+
setMode(newMode);
86+
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
7187
};
72-
7388
const toggleCustomTheme = () => {
7489
setShowCustomTheme((prev) => !prev);
7590
};

‎docs/data/material/getting-started/templates/blog/Blog.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,26 @@ export default function Blog() {
6565
const [showCustomTheme, setShowCustomTheme] = React.useState(true);
6666
const blogTheme = createTheme(getBlogTheme(mode));
6767
const defaultTheme = createTheme({ palette: { mode } });
68+
// This code only runs on the client side, to determine the system color preference
69+
React.useEffect(() => {
70+
// Check if there is a preferred mode in localStorage
71+
const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
72+
if (savedMode) {
73+
setMode(savedMode);
74+
} else {
75+
// If no preference is found, it uses system preference
76+
const systemPrefersDark = window.matchMedia(
77+
'(prefers-color-scheme: dark)',
78+
).matches;
79+
setMode(systemPrefersDark ? 'dark' : 'light');
80+
}
81+
}, []);
6882

6983
const toggleColorMode = () => {
70-
setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
84+
const newMode = mode === 'dark' ? 'light' : 'dark';
85+
setMode(newMode);
86+
localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
7187
};
72-
7388
const toggleCustomTheme = () => {
7489
setShowCustomTheme((prev) => !prev);
7590
};

‎docs/data/material/getting-started/templates/blog/components/AppAppBar.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
3-
import { styled } from '@mui/material/styles';
3+
import { alpha, styled } from '@mui/material/styles';
44
import Box from '@mui/material/Box';
55
import AppBar from '@mui/material/AppBar';
66
import Toolbar from '@mui/material/Toolbar';
@@ -24,7 +24,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
2424
backdropFilter: 'blur(24px)',
2525
border: '1px solid',
2626
borderColor: theme.palette.divider,
27-
backgroundColor: theme.palette.background.default,
27+
backgroundColor: alpha(theme.palette.background.default, 0.4),
2828
boxShadow: theme.shadows[1],
2929
padding: '8px 12px',
3030
}));

‎docs/data/material/getting-started/templates/blog/components/AppAppBar.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import { PaletteMode, styled } from '@mui/material/styles';
2+
import { PaletteMode, alpha, styled } from '@mui/material/styles';
33
import Box from '@mui/material/Box';
44
import AppBar from '@mui/material/AppBar';
55
import Toolbar from '@mui/material/Toolbar';
@@ -23,7 +23,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
2323
backdropFilter: 'blur(24px)',
2424
border: '1px solid',
2525
borderColor: theme.palette.divider,
26-
backgroundColor: theme.palette.background.default,
26+
backgroundColor: alpha(theme.palette.background.default, 0.4),
2727
boxShadow: theme.shadows[1],
2828
padding: '8px 12px',
2929
}));

‎docs/data/material/getting-started/templates/blog/components/MainContent.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,10 +207,11 @@ export default function MainContent() {
207207
gap: 4,
208208
}}
209209
>
210-
<Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
211-
<Chip onClick={handleClick} label="All categories" />
210+
<Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
211+
<Chip onClick={handleClick} size="medium" label="All categories" />
212212
<Chip
213213
onClick={handleClick}
214+
size="medium"
214215
label="Company"
215216
sx={{
216217
backgroundColor: 'transparent',
@@ -219,6 +220,7 @@ export default function MainContent() {
219220
/>
220221
<Chip
221222
onClick={handleClick}
223+
size="medium"
222224
label="Product"
223225
sx={{
224226
backgroundColor: 'transparent',
@@ -227,6 +229,7 @@ export default function MainContent() {
227229
/>
228230
<Chip
229231
onClick={handleClick}
232+
size="medium"
230233
label="Design"
231234
sx={{
232235
backgroundColor: 'transparent',
@@ -235,6 +238,7 @@ export default function MainContent() {
235238
/>
236239
<Chip
237240
onClick={handleClick}
241+
size="medium"
238242
label="Engineering"
239243
sx={{
240244
backgroundColor: 'transparent',

‎docs/data/material/getting-started/templates/blog/components/MainContent.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,10 +199,11 @@ export default function MainContent() {
199199
gap: 4,
200200
}}
201201
>
202-
<Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
203-
<Chip onClick={handleClick} label="All categories" />
202+
<Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
203+
<Chip onClick={handleClick} size="medium" label="All categories" />
204204
<Chip
205205
onClick={handleClick}
206+
size="medium"
206207
label="Company"
207208
sx={{
208209
backgroundColor: 'transparent',
@@ -211,6 +212,7 @@ export default function MainContent() {
211212
/>
212213
<Chip
213214
onClick={handleClick}
215+
size="medium"
214216
label="Product"
215217
sx={{
216218
backgroundColor: 'transparent',
@@ -219,6 +221,7 @@ export default function MainContent() {
219221
/>
220222
<Chip
221223
onClick={handleClick}
224+
size="medium"
222225
label="Design"
223226
sx={{
224227
backgroundColor: 'transparent',
@@ -227,6 +230,7 @@ export default function MainContent() {
227230
/>
228231
<Chip
229232
onClick={handleClick}
233+
size="medium"
230234
label="Engineering"
231235
sx={{
232236
backgroundColor: 'transparent',

0 commit comments

Comments
 (0)