colors from outside of theme are not recomputed on initial render after Gatsby SSR

Describe the bug

Minimal Repo: https://github.com/ehowey/color-mode-bug Relevant code: https://github.com/ehowey/color-mode-bug/blob/main/src/pages/index.js Live site: https://condescending-blackwell-39cd84.netlify.app/

Previously I could use code like the following to dynamically update images in dark mode, e.g. setting invert(1) to invert an image for dark mode. This code is still working fine in development mode but is breaking production mode. I have created a minimal repo and a deploy to Netlify to test this. You can see in the console log it is properly catching the mode as dark but for some reason the text and images are not updating their css based on the color mode.

To test this make sure you are visiting the live site in incognito mode as it will correctly change the colors and image on the second load once the cache is set.

const [mode] = useColorMode()
const isDark = mode === "dark"

<GatsbyImage sx={{ filter: isDark ? "invert(1)" : "none"}} />
<Theme.p sx={{color: isDark ? "tomato" : "cornflowerblue"}}>Some text </Themed.p>

Expected behavior Previously isDark could be used like a boolean flag in the CSS to toggle different colors based on the color mode.

[hasparus]

Hey @ehowey, just FYI. This make take us some more time.

[fcisio]

@ehowey Here is my fix for this.

const SSRFix = colorMode === undefined ? undefined : 'light'
const trueColorMode = colorMode === SSRFix ? 'light' : 'dark'

That way, it’ll work both locally and with SSR.

@hasparus Any way we can have the default color mode show up as undefined always? That way it would be consistent everywhere and we could just update the snippet in the docs.