Update Next.js example with latest Emotion

[joeyvanlierop]

Describe the bug
When reloading a page which is supposed to display the current color mode's background color, a brief blue background is visible.

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/joeyvanlierop/theme-ui-flicker
2. Run yarn install and yarn dev
3. Open http://localhost:3000 in your browser and reload the page to view the flicker

Expected behavior
The background should not flicker blue when reloading the page. Instead it should immediately show the current color mode's background color.
To view the expected behavior, uncomment this line in src/theme.js and reload the page.

Screenshots
In the example repository I have set a transition for the background color to further demonstrate the inital blue background. It is less evident (but still visible) without the transition. To view the flicker without any transition, comment out this line.

• Blue flicker on reload (Bug):
  https://streamable.com/3y85jd

• No flicker on reload (Expected behavior):
  https://streamable.com/gi0ck9

Additional context
The workaround that I am using by setting initialColorModeName to one of the color modes seems to be a very odd solution. There is a warning which outputs:

The initialColorModeName value should be a unique name and cannot reference a key in theme.colors.modes.

The docs state that initialColorModeName is used to define the key used for the top-level color palette, so I do not know why this fix works. Furthermore, if I change initialColorModeName to something other than light or dark, the flicker returns. I would appreciate any clarification on why this is happening. Thanks!

[lachlanjc]

This problem has been fixed, but leaving this issue open for updating our Next example with a .babelrc file: https://github.com/vercel/next.js/blob/canary/examples/with-emotion/.babelrc

[joeyvanlierop]

@lachlanjc That's great to hear! Would you mind referencing the commit or pull request where this was fixed?

[hasparus]

🚀 Issue was released in v0.14.0 🚀