Flickering of dark mode

[Olaleye-Blessing]

Steps

• switch to the dark mode
• refresh the page
• Notice the light mode shows for some seconds before switching to dark mode.

Expected Behavior

The flicker shouldn't happen. The dark mode should be loaded upon page load.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions
• 🎨 Wireframes and designs for Layer5 site in Figma.
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[leecalcote]

Thanks for calling this out, @Olaleye-Blessing. This has been a long topic of discussion and exploration of solutions these past couple weeks. Do join the weekly Websites meetings (if you haven't been already - meet.layer5.io) and let's brainstorm more.

[Olaleye-Blessing]

I think I missed the meeting, sorry for that. Anyone willing to pick the issue up could follow Josh's blog post, it's written for Gatsby

[deveshXm]

i'd like to work on this issue.

[deveshXm]

@Nikhil-Ladha I am having trouble on this issue ,

My research : - As gatsby is a SSR framework the page is pre-rendered so it does not reads the local memory of user and hence the light mode is shown as default and after that it switches to dark mode.

Conclusion : - We can remove this issue by generating a script which will tell the page the default theme stored at our storage before it is rendered. However i am not able to get a clear idea on how i will se the css to dark mode. Eg:

if(windows.storage(getTheme) == "dark") 
{
        then set the global css to dark theme.
}

I am not able to figure out how will i do that as we use styled components and i have a very little idea about them and i was not able to find relatable information on internet also. Can i get some help on this. 😕

[Nikhil-Ladha]

We can set the default theme by comparing the theme value stored in localstorafe and passing the respective value to the ThemedComponents. We have the styles defined for each theme under theme.styles.js which exports the 2 theme lighttheme and darktheme. Based on the storage value we pass the object to the ThemedComponents.

You are right about the approach, and luckily we have a gatsby plugin which provides that. So, you can simply use that plugin and tweak the code accordingly. gatsby-dark-mode-plugin (something close to this name, a google search will get you the correct one)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.

[randychilau]

Hi, I think I have a potential fix for this issue based on information posted above and this plugin: gatsby-styled-components-dark-mode

Please assign this task to me if possible.

Cheers!