From b85ea74541e1fdf86fb824a25629f1baf9144b76 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 30 Oct 2022 17:56:39 +0100
Subject: [PATCH] [core] Create the docs theme once

---
 docs/src/BrandingProvider.tsx     | 13 +++----------
 docs/src/modules/brandingTheme.ts | 21 ++++++++++-----------
 2 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx
index 872f0658357cb9..fec67179e39338 100644
--- a/docs/src/BrandingProvider.tsx
+++ b/docs/src/BrandingProvider.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+import { brandingDarkTheme, brandingLightTheme } from 'docs/src/modules/brandingTheme';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
 import SkipLink from 'docs/src/modules/components/SkipLink';
 
@@ -17,14 +17,7 @@ export default function BrandingProvider(props: BrandingProviderProps) {
   const { children, mode: modeProp } = props;
   const upperTheme = useTheme();
   const mode = modeProp || upperTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        ...getDesignTokens(mode),
-        ...getThemedComponents(),
-      }),
-    [mode],
-  );
+  const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
   return (
     <ThemeProvider theme={modeProp ? () => theme : theme}>
       {modeProp ? null : <NextNProgressBar />}
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index e99bac0f0256ad..af90a88a53b2de 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -1,4 +1,3 @@
-import { deepmerge } from '@mui/utils';
 import { CSSObject } from '@mui/system';
 import type {} from '@mui/material/themeCssVarsAugmentation';
 import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
@@ -225,14 +224,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
     spacing: 10,
     typography: {
       fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','),
-      fontFamilyCode: [
-        'Consolas',
-        'Menlo',
-        'Monaco',
-        'Andale Mono',
-        'Ubuntu Mono',
-        'monospace',
-      ].join(','),
+      fontFamilyCode: ['Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', 'monospace'].join(','),
       fontFamilyTagline: ['"PlusJakartaSans-ExtraBold"', ...systemFont].join(','),
       fontFamilySystem: systemFont.join(','),
       fontWeightSemiBold: 600,
@@ -904,5 +896,12 @@ export function getThemedComponents(): ThemeOptions {
   };
 }
 
-const darkTheme = createTheme(getDesignTokens('dark'));
-export const brandingDarkTheme = deepmerge(darkTheme, getThemedComponents());
+export const brandingDarkTheme = createTheme({
+  ...getDesignTokens('dark'),
+  ...getThemedComponents(),
+});
+
+export const brandingLightTheme = createTheme({
+  ...getDesignTokens('light'),
+  ...getThemedComponents(),
+});