Closed ajayns closed 4 years ago
@ajayns are you able to share a repro so I can debug? That would be super helpful!
My own repo could be a bit complex to debug, so I'll strip it and make a sandbox hold up
Here you go: https://codesandbox.io/s/busy-golick-udg6q
Looking at the simplified version I think it could be something to do with createGlobalStyle from styled-components but I'm still unsure on how to approach this problem.
Thanks for the quick response @TylerBarnes :) Absolutely love your package!
Update: I managed to get it running by moving the theming styles from GlobalStyles to a separate component that targets all children. Then the flixker doesn't seem to occur.
Yep, I've seen this before too. I couldn't figure out how to fix it, I think it's a problem in the GlobalStyles function. Another solution is to put your styles into a css file or module outside of Styled Components.
When transitioning between pages, the theme is changed. During the transition the entering page has the theme right, but once the transition is completed, momentarily (<1s) the page returns to the initial theme and comes back to actual set theme.
Basically like how the theme change transition should work in https://gatsby-plugin-transition-link.netlify.com but after the transition to dark mode, it flickers for a moment into light mode and then goes back dark.