From 962df8b5a3d49b186a9cd1655a9393fbc7fadd64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Tue, 17 Jan 2023 14:37:37 -0300 Subject: [PATCH] fix: colorMode flashing issue --- src/pages/_app.tsx | 6 ++++-- src/pages/_document.tsx | 4 ++++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 0f7b7529ce..5172101bd0 100644 --- 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 ( - + // `colorModeManager` added to fix flashing issue + // See: https://chakra-ui.com/docs/styled-system/color-mode#add-colormodemanager-optional-for-ssr + diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index a28c91b28b..a8524cb30f 100644 --- 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 ( @@ -21,6 +24,7 @@ export default function Document() { +