Skip to content

docs: add FOUC prevention guide for CSR/SPA applications#160

Open
braden-w wants to merge 2 commits intosvecosystem:mainfrom
braden-w:docs/csr-spa-fouc-prevention
Open

docs: add FOUC prevention guide for CSR/SPA applications#160
braden-w wants to merge 2 commits intosvecosystem:mainfrom
braden-w:docs/csr-spa-fouc-prevention

Conversation

@braden-w
Copy link

@braden-w braden-w commented Dec 25, 2025

Motivation

Users of mode-watcher in CSR/SPA contexts (SvelteKit with ssr: false, Vite SPAs, static sites) can experience FOUC because JavaScript runs after initial paint—unless you add a script manually into the head tag of app.html.

The existing createInitialModeExpression utility relies on server hooks, which don't run when serving prerendered or static pages. This guide documents the recommended inline script pattern for those cases.

What's Included

  • New "Guides" section in the navigation
  • guides/csr-spa-fouc.md covering the inline script solution
  • Cross-links from Getting Started and createInitialModeExpression pages

Why Not CSS-Only?

CSS media queries (prefers-color-scheme) only see OS preference—not the user's stored choice in localStorage. If a user chose dark mode but their OS is light, they still get FOUC.

References

@changeset-bot
Copy link

changeset-bot bot commented Dec 25, 2025

⚠️ No Changeset found

Latest commit: 7bed79e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Dec 25, 2025

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
mode-watcher ✅ Ready (View Log) Visit Preview 7bed79e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant