fix: colorMode flashing issue

2 years ago · 962df8b5a3
parent 86491c66bb
commit 962df8b5a3
2 changed files with 8 additions and 2 deletions
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@ -1,4 +1,4 @@
-import { ChakraProvider } from '@chakra-ui/react';
+import { ChakraProvider, localStorageManager } from '@chakra-ui/react';
 import { AppProps } from 'next/app';
 import { useEffect } from 'react';
 import { init } from '@socialgouv/matomo-next';
@ -20,7 +20,9 @@ export default function App({ Component, pageProps }: AppProps) {
  }, []);

  return (
-    <ChakraProvider theme={theme}>
+    // `colorModeManager` added to fix flashing issue
+    // See: https://chakra-ui.com/docs/styled-system/color-mode#add-colormodemanager-optional-for-ssr
+    <ChakraProvider theme={theme} colorModeManager={localStorageManager}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@ -1,5 +1,8 @@
+import { ColorModeScript } from '@chakra-ui/react';
 import { Html, Head, Main, NextScript } from 'next/document';

+import theme from '../theme';
+
 export default function Document() {
  return (
    <Html lang='en'>
@ -21,6 +24,7 @@ export default function Document() {
      </Head>

      <body>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <Main />
        <NextScript />
      </body>