[material-ui] Refine and unify custom template themes

.circleci/config.yml

@@ -299,6 +299,12 @@ jobs:
           command: |
             pnpm docs:link-check
             git add -A && git diff --exit-code --staged
+      - run:
+          name: Update the templates shared themes
+          command: pnpm template:update-theme
+      - run:
+          name: '`pnpm template:update-theme` changes committed?'
+          command: git add -A && git diff --exit-code --staged
   test_types:
     <<: *default-job
     resource_class: 'medium+'

benchmark/server/scenarios/server.js

@@ -11,7 +11,6 @@ import {
   createGenerateClassName,
 } from '@mui/styles';
 import { green, red } from '@mui/material/colors';
-import Pricing from 'docs/data/material/getting-started/templates/pricing/Pricing';
 import { spacing, palette, unstable_styleFunctionSx as styleFunction } from '@mui/system';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -42,23 +41,6 @@ const theme = createTheme({
   },
 });
 
-function renderPricing(req, res) {
-  const sheetsRegistry = new SheetsRegistry();
-  const html = ReactDOMServer.renderToString(
-    <StylesProvider
-      sheetsRegistry={sheetsRegistry}
-      generateClassName={createGenerateClassName()}
-      sheetsManager={new Map()}
-    >
-      <ThemeProvider theme={theme}>
-        <Pricing />
-      </ThemeProvider>
-    </StylesProvider>,
-  );
-  const css = sheetsRegistry.toString();
-  res.send(renderFullPage(html, css));
-}
-
 function renderBox(req, res) {
   const sheetsRegistry = new SheetsRegistry();
   const html = ReactDOMServer.renderToString(
@@ -156,7 +138,6 @@ function renderSystem(req, res) {
 }
 
 const app = express();
-app.get('/', renderPricing);
 app.get('/spacing', renderSpacing);
 app.get('/palette', renderPalette);
 app.get('/system', renderSystem);

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

@@ -65,11 +65,26 @@ export default function Blog() {
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
   const blogTheme = createTheme(getBlogTheme(mode));
   const defaultTheme = createTheme({ palette: { mode } });
+  // This code only runs on the client side, to determine the system color preference
+  React.useEffect(() => {
+    // Check if there is a preferred mode in localStorage
+    const savedMode = localStorage.getItem('themeMode');
+    if (savedMode) {
+      setMode(savedMode);
+    } else {
+      // If no preference is found, it uses system preference
+      const systemPrefersDark = window.matchMedia(
+        '(prefers-color-scheme: dark)',
+      ).matches;
+      setMode(systemPrefersDark ? 'dark' : 'light');
+    }
+  }, []);
 
   const toggleColorMode = () => {
-    setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    const newMode = mode === 'dark' ? 'light' : 'dark';
+    setMode(newMode);
+    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
   };
-
   const toggleCustomTheme = () => {
     setShowCustomTheme((prev) => !prev);
   };

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

@@ -65,11 +65,26 @@ export default function Blog() {
   const [showCustomTheme, setShowCustomTheme] = React.useState(true);
   const blogTheme = createTheme(getBlogTheme(mode));
   const defaultTheme = createTheme({ palette: { mode } });
+  // This code only runs on the client side, to determine the system color preference
+  React.useEffect(() => {
+    // Check if there is a preferred mode in localStorage
+    const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
+    if (savedMode) {
+      setMode(savedMode);
+    } else {
+      // If no preference is found, it uses system preference
+      const systemPrefersDark = window.matchMedia(
+        '(prefers-color-scheme: dark)',
+      ).matches;
+      setMode(systemPrefersDark ? 'dark' : 'light');
+    }
+  }, []);
 
   const toggleColorMode = () => {
-    setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
+    const newMode = mode === 'dark' ? 'light' : 'dark';
+    setMode(newMode);
+    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
   };
-
   const toggleCustomTheme = () => {
     setShowCustomTheme((prev) => !prev);
   };

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
@@ -24,7 +24,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   backdropFilter: 'blur(24px)',
   border: '1px solid',
   borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: alpha(theme.palette.background.default, 0.4),
   boxShadow: theme.shadows[1],
   padding: '8px 12px',
 }));

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PaletteMode, styled } from '@mui/material/styles';
+import { PaletteMode, alpha, styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
@@ -23,7 +23,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
   backdropFilter: 'blur(24px)',
   border: '1px solid',
   borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: alpha(theme.palette.background.default, 0.4),
   boxShadow: theme.shadows[1],
   padding: '8px 12px',
 }));

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

@@ -207,10 +207,11 @@ export default function MainContent() {
           gap: 4,
         }}
       >
-        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
-          <Chip onClick={handleClick} label="All categories" />
+        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
+          <Chip onClick={handleClick} size="medium" label="All categories" />
           <Chip
             onClick={handleClick}
+            size="medium"
             label="Company"
             sx={{
               backgroundColor: 'transparent',
@@ -219,6 +220,7 @@ export default function MainContent() {
           />
           <Chip
             onClick={handleClick}
+            size="medium"
             label="Product"
             sx={{
               backgroundColor: 'transparent',
@@ -227,6 +229,7 @@ export default function MainContent() {
           />
           <Chip
             onClick={handleClick}
+            size="medium"
             label="Design"
             sx={{
               backgroundColor: 'transparent',
@@ -235,6 +238,7 @@ export default function MainContent() {
           />
           <Chip
             onClick={handleClick}
+            size="medium"
             label="Engineering"
             sx={{
               backgroundColor: 'transparent',

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

@@ -199,10 +199,11 @@ export default function MainContent() {
           gap: 4,
         }}
       >
-        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1 }}>
-          <Chip onClick={handleClick} label="All categories" />
+        <Box sx={{ display: 'flex', flexDirection: 'row', gap: 3 }}>
+          <Chip onClick={handleClick} size="medium" label="All categories" />
           <Chip
             onClick={handleClick}
+            size="medium"
             label="Company"
             sx={{
               backgroundColor: 'transparent',
@@ -211,6 +212,7 @@ export default function MainContent() {
           />
           <Chip
             onClick={handleClick}
+            size="medium"
             label="Product"
             sx={{
               backgroundColor: 'transparent',
@@ -219,6 +221,7 @@ export default function MainContent() {
           />
           <Chip
             onClick={handleClick}
+            size="medium"
             label="Design"
             sx={{
               backgroundColor: 'transparent',
@@ -227,6 +230,7 @@ export default function MainContent() {
           />
           <Chip
             onClick={handleClick}
+            size="medium"
             label="Engineering"
             sx={{
               backgroundColor: 'transparent',