fix(web): eliminate dark mode white flash on initial page load#313
Open
KaparthyReddy wants to merge 1 commit into
Open
fix(web): eliminate dark mode white flash on initial page load#313KaparthyReddy wants to merge 1 commit into
KaparthyReddy wants to merge 1 commit into
Conversation
Add blocking inline IIFE script to <head> in app.html that reads
localStorage('devcard-theme') and falls back to window.matchMedia
to apply the .dark class to <html> before any content renders.
Previously, the theme was applied inside onMount in +page.svelte,
which runs after first paint — causing a visible white flash for
dark mode users on hard refresh or slow page loads.
Closes Dev-Card#91
Harxhit
added
the
gssoc:approved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Eliminates the dark mode white flash on initial page load. Previously, the theme was applied inside
onMountin+page.svelte, which runs after first paint — causing a brief white flash for dark mode users on hard refresh or slow page loads. This PR adds a blocking inline IIFE script to<head>inapp.htmlthat readslocalStorage('devcard-theme')and falls back towindow.matchMedia('prefers-color-scheme: dark')to apply the.darkclass to<html>before any content renders.Closes #91
Type of Change
What Changed
apps/web/src/app.html— Added a blocking synchronous IIFE script in<head>that readslocalStorage('devcard-theme')and falls back towindow.matchMedia('prefers-color-scheme: dark'), applying.darkto<html>before first paint. Wrapped in try/catch for private browsing resilience.How to Test
devcard-themedevcard-themetolightin localStorage, hard refresh — should load light with no flashChecklist
pnpm -r run lintpasses).pnpm -r run typecheck).pnpm -r run test).console.logor debug statements left in the code.Screenshots / Recordings
Light mode (devcard-theme=light):
Dark mode (devcard-theme=dark):
Both load instantly with correct theme — no white flash on hard refresh.
Additional Context
Only
apps/web/src/app.htmlwas modified. No changes to component logic, styles, or other files. The existingonMounttheme toggle in+page.sveltecontinues to handle runtime theme switching — this script only ensures the correct initial state is set before first paint.The backend test failures (
event.test.ts) are pre-existing and unrelated to this change — they fail identically onmainwithout our modification. Our change only touchesapps/web/src/app.html.