From 0ac3680b54dcca03ab73c00f242f96dfe04dd7a3 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Wed, 20 Dec 2023 10:37:08 -0300
Subject: [PATCH] Fix mode toggle

---
 .../getting-started/templates/album/Album.tsx | 16 ++--
 .../{albumTheme.tsx => getAlbumTheme.tsx}     | 73 ++++++++-----------
 2 files changed, 40 insertions(+), 49 deletions(-)
 rename docs/data/material/getting-started/templates/album/{albumTheme.tsx => getAlbumTheme.tsx} (78%)

diff --git a/docs/data/material/getting-started/templates/album/Album.tsx b/docs/data/material/getting-started/templates/album/Album.tsx
index f67a68407f002d..6af0824ae31ea2 100644
--- a/docs/data/material/getting-started/templates/album/Album.tsx
+++ b/docs/data/material/getting-started/templates/album/Album.tsx
@@ -3,7 +3,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
-import { ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
 
 import AppBar from './components/AppBar';
@@ -14,9 +14,8 @@ import Pricing from './components/Pricing';
 import Features from './components/Features';
 import Testimonials from './components/Testimonials';
 import FAQ from './components/FAQ';
-import { createContext, useState } from 'react';
 
-import getAlbumTheme from './albumTheme';
+import getAlbumTheme from './getAlbumTheme';
 
 function Copyright() {
   return (
@@ -36,10 +35,12 @@ interface ColorMode {
   toggleColorMode: () => void;
 }
 
-export const ColorModeContext = createContext<ColorMode | undefined>(undefined);
+export const ColorModeContext = React.createContext<ColorMode | undefined>(
+  undefined,
+);
 
 export default function Album() {
-  const [colorMode, setColorMode] = useState<ColorMode>({
+  const [colorMode, setColorMode] = React.useState<ColorMode>({
     mode: 'light',
     toggleColorMode: () => {
       setColorMode((prevMode) => ({
@@ -49,7 +50,10 @@ export default function Album() {
     },
   });
 
-  const theme = React.useMemo(() => getAlbumTheme(colorMode.mode), [colorMode.mode]);
+  const theme = React.useMemo(
+    () => createTheme(getAlbumTheme(colorMode.mode)),
+    [colorMode.mode],
+  );
 
   return (
     <ColorModeContext.Provider value={colorMode}>
diff --git a/docs/data/material/getting-started/templates/album/albumTheme.tsx b/docs/data/material/getting-started/templates/album/getAlbumTheme.tsx
similarity index 78%
rename from docs/data/material/getting-started/templates/album/albumTheme.tsx
rename to docs/data/material/getting-started/templates/album/getAlbumTheme.tsx
index 55f5cf8ce4fb0b..a00954fa15f57c 100644
--- a/docs/data/material/getting-started/templates/album/albumTheme.tsx
+++ b/docs/data/material/getting-started/templates/album/getAlbumTheme.tsx
@@ -1,4 +1,3 @@
-import { createTheme } from '@mui/material/styles';
 import { grey, red } from '@mui/material/colors';
 import { PaletteMode } from '@mui/material';
 
@@ -77,32 +76,29 @@ const getDesignTokens = (mode: PaletteMode) => ({
   },
 });
 
-const theme = createTheme({
-  palette: {
-    ...getDesignTokens,
-  },
-  typography: {
-    fontFamily: "'Inter', sans-serif",
-    fontSize: 14,
-    fontWeightLight: 300,
-    fontWeightRegular: 400,
-    fontWeightMedium: 500,
-  },
-});
-
-const fontHeader = {
-  color: theme.palette.text.primary,
-  fontWeight: theme.typography.fontWeightMedium,
+const typographyBase = {
   fontFamily: "'Inter', sans-serif",
+  fontSize: 14,
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
 };
 
 export default function getAlbumTheme(mode: 'light' | 'dark') {
+  const modeDesignTokens = getDesignTokens(mode);
+
+  const fontHeader = {
+    color: modeDesignTokens.palette.text.primary,
+    fontWeight: typographyBase.fontWeightMedium,
+    fontFamily: "'Inter', sans-serif",
+  };
+
   return {
-    ...theme,
+    ...modeDesignTokens,
     palette: {
-      ...theme.palette,
+      ...modeDesignTokens.palette,
       background: {
-        ...theme.palette.background,
+        ...modeDesignTokens.palette.background,
       },
     },
     components: {
@@ -117,16 +113,17 @@ export default function getAlbumTheme(mode: 'light' | 'dark') {
       },
       MuiButton: {
         styleOverrides: {
-          root: ({ ownerState }: { ownerState: { variant: string } }) => ({
-            boxShadow: 'none',
-            borderRadius: '8px',
+          root: ({ ownerState }: { ownerState: { variant?: string } }) =>
+            ({
+              boxShadow: 'none',
+              borderRadius: '8px',
 
-            ...(ownerState.variant === 'outlined' && {
-              border: '1px solid',
-              borderColor: '#C7DFF7',
-            }),
-            textTransform: 'none',
-          }),
+              ...(ownerState.variant === 'outlined' && {
+                border: '1px solid',
+                borderColor: '#C7DFF7',
+              }),
+              textTransform: 'none',
+            } as const),
         },
       },
       MuiLink: {
@@ -197,56 +194,46 @@ export default function getAlbumTheme(mode: 'light' | 'dark') {
       },
     },
     typography: {
-      ...theme.typography,
+      ...typographyBase,
       fontHeader,
       h1: {
-        ...theme.typography.h1,
         ...fontHeader,
         letterSpacing: 0,
         fontSize: 60,
       },
       h2: {
-        ...theme.typography.h2,
         ...fontHeader,
         fontSize: 48,
       },
       h3: {
-        ...theme.typography.h3,
         ...fontHeader,
         fontSize: 42,
       },
       h4: {
-        ...theme.typography.h4,
         ...fontHeader,
         fontSize: 36,
       },
       h5: {
-        ...theme.typography.h5,
         fontSize: 20,
-        fontWeight: theme.typography.fontWeightLight,
+        fontWeight: typographyBase.fontWeightLight,
       },
       h6: {
-        ...theme.typography.h6,
         ...fontHeader,
         fontSize: 18,
       },
       subtitle1: {
-        ...theme.typography.subtitle1,
         fontSize: 18,
       },
       subtitle2: {
-        ...theme.typography.subtitle2,
         fontSize: 16,
       },
       body1: {
-        ...theme.typography.body2,
-        fontWeight: theme.typography.fontWeightRegular,
+        fontWeight: typographyBase.fontWeightRegular,
         fontSize: 16,
       },
       body2: {
-        ...theme.typography.body1,
         fontSize: 14,
       },
     },
-  };
+  } as const;
 }