Skip to content

Commit

Permalink
[core] Create the docs theme once (mui#34954)
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari authored and felipe.richter committed Dec 6, 2022
1 parent 32a2992 commit 6eae91f
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 21 deletions.
13 changes: 3 additions & 10 deletions docs/src/BrandingProvider.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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 />}
Expand Down
21 changes: 10 additions & 11 deletions docs/src/modules/brandingTheme.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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(),
});

0 comments on commit 6eae91f

Please sign in to comment.