[website] Fix home page dark mode flicker (mui#33545)

daniel-rabe · Nov 29, 2022 · 0e637c1 · 0e637c1
1 parent beaa4a6
commit 0e637c1
Show file tree

Hide file tree

Showing 45 changed files with 2,078 additions and 2,559 deletions.
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -7,7 +7,7 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import createEmotionCache from 'docs/src/createEmotionCache';
 import { getMetaThemeColor } from 'docs/src/modules/brandingTheme';
 import GlobalStyles from '@mui/material/GlobalStyles';
-import { getInitColorSchemeScript } from '@mui/joy/styles';
+import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/material/styles';
 
 // You can find a benchmark of the available CSS minifiers under
 // https://github.com/GoalSmashers/css-minification-benchmark
@@ -143,7 +143,7 @@ export default class MyDocument extends Document {
           />
         </Head>
         <body>
-          {getInitColorSchemeScript({ enableSystem: true })}
+          {getMuiInitColorSchemeScript()}
           <Main />
           <script
             // eslint-disable-next-line react/no-danger

diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
@@ -12,13 +12,13 @@ import Testimonials from 'docs/src/components/home/Testimonials';
 import Sponsors from 'docs/src/components/home/Sponsors';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import NewsletterToast from 'docs/src/components/home/NewsletterToast';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Home() {
   return (
-    <BrandingProvider>
+    <BrandingCssVarsProvider>
       <Head
         title="MUI: The React component library you always wanted"
         description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
@@ -60,6 +60,6 @@ export default function Home() {
           `,
         }}
       />
-    </BrandingProvider>
+    </BrandingCssVarsProvider>
   );
 }
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { deepmerge } from '@mui/utils';
+import {
+  Experimental_CssVarsProvider as CssVarsProvider,
+  experimental_extendTheme as extendTheme,
+  PaletteColorOptions,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+
+declare module '@mui/material/styles' {
+  interface PaletteOptions {
+    primaryDark?: PaletteColorOptions;
+  }
+}
+
+const { palette: lightPalette, typography, ...designTokens } = getDesignTokens('light');
+const { palette: darkPalette } = getDesignTokens('dark');
+
+const theme = extendTheme({
+  cssVarPrefix: 'muidocs',
+  colorSchemes: {
+    light: {
+      palette: lightPalette,
+    },
+    dark: {
+      palette: darkPalette,
+    },
+  },
+  ...designTokens,
+  typography: deepmerge(typography, {
+    h1: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'initial',
+      },
+    },
+    h2: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-grey-100)',
+      },
+    },
+    h5: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-primary-300)',
+      },
+    },
+  }),
+  ...getThemedComponents(),
+});
+
+export default function BrandingCssVarsProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <CssVarsProvider theme={theme} disableTransitionOnChange>
+      <NextNProgressBar />
+      <CssBaseline />
+      {children}
+    </CssVarsProvider>
+  );
+}
diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { deepmerge } from '@mui/utils';
 import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
@@ -18,12 +17,14 @@ export default function BrandingProvider(props: BrandingProviderProps) {
   const { children, mode: modeProp } = props;
   const upperTheme = useTheme();
   const mode = modeProp || upperTheme.palette.mode;
-  const theme = React.useMemo(() => {
-    const designTokens = getDesignTokens(mode);
-    let newTheme = createTheme(designTokens);
-    newTheme = deepmerge(newTheme, getThemedComponents(newTheme));
-    return newTheme;
-  }, [mode]);
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        ...getDesignTokens(mode),
+        ...getThemedComponents(),
+      }),
+    [mode],
+  );
   return (
     <ThemeProvider theme={modeProp ? () => theme : theme}>
       {modeProp ? null : <NextNProgressBar />}

diff --git a/docs/src/components/action/ArrowButton.tsx b/docs/src/components/action/ArrowButton.tsx
@@ -16,23 +16,37 @@ export default function ArrowButton({
       size="small"
       aria-label={label[direction]}
       {...props}
-      sx={{
-        color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'primary.main'),
-        border: '1px solid',
-        borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.300' : 'grey.200'),
-        '&:hover': {
-          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.200' : 'grey.300'),
+      sx={[
+        {
+          border: '1px solid',
+          color: 'primary.main',
+          borderColor: 'grey.200',
+          '&:hover': {
+            borderColor: 'grey.300',
+          },
+          '&.Mui-disabled': {
+            opacity: 0.5,
+            color: 'grey.700',
+            borderColor: 'grey.300',
+          },
+          '& + .MuiIconButton-root': {
+            ml: 2,
+          },
         },
-        '&.Mui-disabled': {
-          opacity: 0.5,
-          color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'grey.700'),
-          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primary.700' : 'grey.300'),
-        },
-        '& + .MuiIconButton-root': {
-          ml: 2,
-        },
-        ...props.sx,
-      }}
+        (theme) =>
+          theme.applyDarkStyles({
+            color: '#fff',
+            borderColor: 'primaryDark.300',
+            '&:hover': {
+              borderColor: 'primaryDark.200',
+            },
+            '&.Mui-disabled': {
+              color: '#fff',
+              borderColor: 'primary.700',
+            },
+          }),
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
     >
       {direction === 'left' && <KeyboardArrowLeftRounded fontSize="small" />}
       {direction === 'right' && <KeyboardArrowRightRounded fontSize="small" />}

diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
@@ -5,6 +5,7 @@ export default function Highlighter({
   disableBorder = false,
   selected = false,
   selectedBg = 'white',
+  sx,
   ...props
 }: {
   disableBorder?: boolean;
@@ -36,38 +37,58 @@ export default function Highlighter({
           props.onFocusVisible(event);
         }
       }}
-      sx={{
-        justifyContent: 'flex-start',
-        textAlign: 'left',
-        alignItems: 'center',
-        borderRadius: 1,
-        height: '100%',
-        border: '1px solid transparent',
-        transitionProperty: 'all',
-        transitionDuration: '150ms',
-        color: (theme) => (theme.palette.mode === 'dark' ? 'primary.800' : 'primary.300'),
-        ...((!disableBorder || selected) && {
-          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'),
-        }),
-        ...(selected && {
-          bgcolor: (theme) =>
-            theme.palette.mode === 'dark' ? 'primaryDark.700' : lightSelectedBg[selectedBg],
-          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.300' : 'grey.200'),
-          color: (theme) => (theme.palette.mode === 'dark' ? 'primary.300' : 'primary.500'),
-        }),
-        ...(!selected && {
-          '&:hover, &:focus': {
-            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : 'grey.100'),
-            '@media (hover: none)': {
-              bgcolor: 'transparent',
+      sx={[
+        (theme) => ({
+          justifyContent: 'flex-start',
+          textAlign: 'left',
+          alignItems: 'center',
+          borderRadius: 1,
+          height: '100%',
+          border: '1px solid transparent',
+          transitionProperty: 'all',
+          transitionDuration: '150ms',
+          color: 'primary.300',
+          ...((!disableBorder || selected) && {
+            borderColor: 'grey.200',
+          }),
+          ...(selected && {
+            bgcolor: lightSelectedBg[selectedBg],
+            borderColor: 'grey.200',
+            color: 'primary.500',
+          }),
+          ...(!selected && {
+            '&:hover, &:focus': {
+              bgcolor: 'grey.100',
+              '@media (hover: none)': {
+                bgcolor: 'transparent',
+              },
             },
+          }),
+          ...theme.applyDarkStyles({
+            color: 'primary.800',
+            ...((!disableBorder || selected) && {
+              borderColor: 'primaryDark.500',
+            }),
+            ...(selected && {
+              bgcolor: 'primaryDark.700',
+              borderColor: 'primaryDark.300',
+              color: 'primary.300',
+            }),
+            ...(!selected && {
+              '&:hover, &:focus': {
+                bgcolor: 'primaryDark.800',
+                '@media (hover: none)': {
+                  bgcolor: 'transparent',
+                },
+              },
+            }),
+          }),
+          '&.Mui-disabled': {
+            opacity: 0.4,
           },
         }),
-        '&.Mui-disabled': {
-          opacity: 0.4,
-        },
-        ...props.sx,
-      }}
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     />
   );
 }
diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { ThemeProvider, alpha } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
 import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
 import Link from 'docs/src/modules/components/Link';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
 import ROUTES from 'docs/src/route';
 
 export default function StylingInfo({
@@ -30,53 +29,51 @@ export default function StylingInfo({
     </React.Fragment>
   );
   return (
-    <ThemeProvider theme={brandingDarkTheme}>
-      <Box
-        {...props}
+    <Box
+      {...props}
+      sx={{
+        position: 'absolute',
+        bottom: 0,
+        transform: hidden || !appeared ? 'translateY(100%)' : 'translateY(0)',
+        transition: '0.3s',
+        left: 0,
+        right: 0,
+        px: 2,
+        pt: 1,
+        pb: 2,
+        bgcolor: ({ palette }) => alpha(palette.primaryDark[700], 0.5),
+        backdropFilter: 'blur(8px)',
+        zIndex: 1,
+        borderTop: '1px solid',
+        borderColor: 'divider',
+        borderRadius: '0 0 10px 10px',
+        ...props.sx,
+      }}
+    >
+      <IconButton
+        aria-label={hidden ? 'show' : 'hide'}
+        onClick={() => setHidden((bool) => !bool)}
         sx={{
           position: 'absolute',
-          bottom: 0,
-          transform: hidden || !appeared ? 'translateY(100%)' : 'translateY(0)',
+          zIndex: 2,
           transition: '0.3s',
-          left: 0,
-          right: 0,
-          px: 2,
-          pt: 1,
-          pb: 2,
-          bgcolor: ({ palette }) => alpha(palette.primaryDark[700], 0.5),
-          backdropFilter: 'blur(8px)',
-          zIndex: 1,
-          borderTop: '1px solid',
-          borderColor: 'divider',
-          borderRadius: '0 0 10px 10px',
-          ...props.sx,
+          right: 10,
+          bottom: '100%',
+          transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
+          opacity: appeared ? 1 : 0,
+          bgcolor: 'primaryDark.500',
+          '&:hover, &.Mui-focused': {
+            bgcolor: 'primaryDark.600',
+          },
         }}
       >
-        <IconButton
-          aria-label={hidden ? 'show' : 'hide'}
-          onClick={() => setHidden((bool) => !bool)}
-          sx={{
-            position: 'absolute',
-            zIndex: 2,
-            transition: '0.3s',
-            right: 10,
-            bottom: '100%',
-            transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
-            opacity: appeared ? 1 : 0,
-            bgcolor: 'primaryDark.500',
-            '&:hover, &.Mui-focused': {
-              bgcolor: 'primaryDark.600',
-            },
-          }}
-        >
-          {hidden ? (
-            <KeyboardArrowUpRounded fontSize="small" />
-          ) : (
-            <KeyboardArrowDownRounded fontSize="small" />
-          )}
-        </IconButton>
-        {content || defaultContent}
-      </Box>
-    </ThemeProvider>
+        {hidden ? (
+          <KeyboardArrowUpRounded fontSize="small" />
+        ) : (
+          <KeyboardArrowDownRounded fontSize="small" />
+        )}
+      </IconButton>
+      {content || defaultContent}
+    </Box>
   );
 }