Skip to content

Fix/theme flash 208#527

Merged
indresh404 merged 2 commits into
indresh404:mainfrom
riyanshigupta890-cloud:fix/theme-flash-208
Jun 15, 2026
Merged

Fix/theme flash 208#527
indresh404 merged 2 commits into
indresh404:mainfrom
riyanshigupta890-cloud:fix/theme-flash-208

Conversation

@riyanshigupta890-cloud

Copy link
Copy Markdown
Contributor

Description

Fixes the theme persistence issue where the app flashes light mode before switching to dark mode on page refresh. The ThemeProvider applies the saved theme class to <html> inside a useEffect, which only runs after the browser's first paint — causing a visible light→dark flash when the saved theme is "dark". This PR adds a small synchronous inline script in index.html that reads the saved theme from localStorage (same logic as ThemeContext.jsx) and applies the dark class to <html> before React mounts, eliminating the flash.

Related Issue

Closes #208

Type of Change

Please delete options that are not relevant:

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update

Screenshots / Videos (if applicable)

Please add screenshots or screen recordings to demonstrate the visual changes.

Testing Done

  • Command run: npm run test
  • Command run: npm run lint
  • Command run: npm run build
  • Visual verification on local dev server (http://localhost:5173)

Steps to reproduce/verify:

  1. Toggle to dark mode using ThemeToggle.
  2. Refresh the page.
  3. Before fix: brief flash of light mode before dark mode applies.
  4. After fix: page loads directly in dark mode with no flash.

Checklist

  • My code follows the style guidelines of this project.
  • I have performed a self-review of my own code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have made corresponding changes to the documentation.
  • My changes generate no new warnings or console errors.
  • I have added tests that prove my fix is effective or that my feature works.
  • New and existing unit tests pass locally with my changes.
  • Any dependent changes have been merged and published in downstream modules.

Contributor Declaration

  • I confirm that this contribution is made under the rules of GSSoC 2026 and NSoC 2026.
  • I confirm that I have been assigned the related issue by a maintainer before opening this PR.
  • I have read the Contributing Guidelines and Code of Conduct.

@vercel

vercel Bot commented Jun 14, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ranker-hub Ready Ready Preview, Comment Jun 14, 2026 2:05pm

@github-actions github-actions Bot added backend Backend/Firebase related changes bug Something isn't working documentation Improvements or additions to documentation enhancement New feature or request frontend Frontend related changes (HTML/CSS/JS/React) gssoc GirlScript Summer of Code gssoc26 GirlScript Summer of Code 2026 nsoc NSoC NSoC'26 NSoC 2026 pending-review PR is pending review labels Jun 14, 2026
@indresh404 indresh404 merged commit 0e56d65 into indresh404:main Jun 15, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backend Backend/Firebase related changes bug Something isn't working documentation Improvements or additions to documentation enhancement New feature or request frontend Frontend related changes (HTML/CSS/JS/React) gssoc GirlScript Summer of Code gssoc26 GirlScript Summer of Code 2026 level3 nsoc NSoC NSoC'26 NSoC 2026 pending-review PR is pending review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Theme Persistence & Dark/Light Mode Switcher

2 participants