question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:12 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
hasparuscommented, May 4, 2021

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

1reaction
fcisiocommented, Apr 8, 2021

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Eric Howey on Twitter: "@SolomonAtlee On first load w/o a cache it ...
colors from outside of theme are not recomputed on initial render after Gatsby SSR · Issue #1602 ·... Describe the bug Minimal Repo: ......
Read more >
Rendering Options - Gatsby
and Server-Side rendering (SSR). This guide dives into the what each of those modes means and when you might choose one over another....
Read more >
system-ui - Bountysource
The colorModes API writes theme-ui-color-mode: "default" to localStorage when ... colors from outside of theme are not recomputed on initial render after ......
Read more >
React Hook does not work properly on the first render in ...
I have a gatsby website that uses emotion for css in js. I use emotion theming to implement a dark mode. The dark...
Read more >
Work journal - Sam Selikoff
Still, not sure I'm doing this right or if there's some better heuristics I'm ... Published "Transitive Dependencies and Suspending After Initial Render", ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found