Chakra UI Dark Mode White Screen Flash

When I run the nextjs-typescript example when you click on different pages on Dark Mode the screen will flash with a white before loading the page. It’s not as bad as typing in the URL manually but it’s still quite jarring. Any ideas how I can fix this?

Thanks!

Steps to reproduce:

Clone nextjs-typescript

• npm i framer-motion
• npm run dev
• Click on View Properties

[samchungy]

I think I’ve fixed it, if you import Chakra in _app.tsx it seems to fix it.

import {Chakra} from '../Chakra';

and then wrap the component in it:

<Chakra><Component {...pageProps} /></Chakra>

[NxRoot]

For React Users (no SSR)

Add this script below the body of index.html

<script>
    function useColor(light="white", dark="#171923"){
      return window.localStorage.getItem("chakra-ui-color-mode") === "dark" ? dark : light
    }
    document.body.style.background = useColor();
</script>

You might want to specify the correct color for each mode.