[core] Create the docs theme once

mui · Oct 30, 2022 · 5e4b4ea · 5e4b4ea
1 parent 5a84b55
commit 5e4b4ea
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git 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
@@ -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';
@@ -227,7 +226,6 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
       fontFamily: ['"IBM Plex Sans"', ...systemFont].join(','),
       fontFamilyCode: [
         'Consolas',
-        'Menlo',
         'Monaco',
         'Andale Mono',
         'Ubuntu Mono',
@@ -904,5 +902,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(),
+});