Dark mode flicker — white background appears briefly before theme loads

[Bhumikagarggg]

Description

When opening the Layer5 website, there is a brief white background flash before the dark theme loads. This creates a noticeable flicker effect and impacts the perceived user experience.

This appears to be a theme initialization or CSS loading timing issue (FOUC — Flash of Unstyled Content).

Expected Behavior

The website should load directly with the correct theme background (dark mode) without any white flash.

Screenshots

Screen.Recording.2026-02-28.at.9.10.02.PM.mov

---

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 (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[AnkitRewar11]

Hi @Bhumikagarggg, I'd like to work on this issue. The flicker is likely due to the theme initialization happening after the initial paint. I plan to fix this by implementing a theme-detection script in gatsby-ssr.js to avoid the FOUC. Could you please assign this to me?

[AnkitRewar11]

I have submitted a PR #7446 to fix this issue.

[AnkitRewar11]

@YASHMAHAKAL @Bhumikagarggg

Thank you for the feedback on the previous PR!

As suggested, I have squashed all commits into a single clean commit
and opened this new PR #7533 . The approach has been finalized no more
circular changes.

Please review when you get a chance. 🙏