Skip to content

fix: light theme flash on refreshing#233

Merged
anurag2787 merged 2 commits intoiiitl:mainfrom
Ayush-2511:bug/light-flash-on-refresh
Apr 12, 2026
Merged

fix: light theme flash on refreshing#233
anurag2787 merged 2 commits intoiiitl:mainfrom
Ayush-2511:bug/light-flash-on-refresh

Conversation

@Ayush-2511
Copy link
Copy Markdown
Contributor

@Ayush-2511 Ayush-2511 commented Apr 11, 2026

Resolves #229

Description

What is the purpose of this pull request?
The purpose of this pull request is to fix the bug in which when we switch to dark mode then refresh the site we see a flash of light mode for a second

Live Demo

Recording.2026-04-12.043356.mp4

Note for Maintainer

used "--no-verify" while committing because the script "preetier" ran out of memory therefore was unable to commit normally

Checkout

  • I have read all the contributor guidelines for the repo.

Summary by CodeRabbit

  • Bug Fixes

    • Eliminated hydration warnings during page load
    • Improved theme switching stability and consistency
    • Ensured reliable initial theme selection including system default
  • Refactor

    • Upgraded theme system for smoother transitions, better startup behavior, and improved maintainability

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 11, 2026

@Ayush-2511 is attempting to deploy a commit to the mrimmortal09's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 11, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 14fa4311-5d67-42df-9b95-139a54122e6b

📥 Commits

Reviewing files that changed from the base of the PR and between 3feede3 and e2f5389.

📒 Files selected for processing (1)
  • components/theme-toggler.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • components/theme-toggler.tsx

Walkthrough

Wraps the app root with a ThemeProvider from @/components/theme-provider and replaces manual theme state in the toggle with next-themes' useTheme, adding a mounted guard and suppressing hydration warnings on the <html> element.

Changes

Cohort / File(s) Summary
Theme Provider Setup
app/layout.jsx
Adds ThemeProvider around existing AuthProvider subtree with attribute="class", defaultTheme="system", enableSystem, disableTransitionOnChange; sets suppressHydrationWarning on <html lang="en">.
Theme Toggle Component
components/theme-toggler.tsx
Replaces local useState + localStorage and manual document.documentElement class toggling with next-themes' useTheme (theme, resolvedTheme, setTheme); introduces mounted state to defer visible rendering until client mount and updates click handler and icon logic to use resolvedTheme ?? theme.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

accepted-50

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'fix: light theme flash on refreshing' directly addresses the main issue being resolved—eliminating the light theme flash when refreshing the page in dark mode.
Linked Issues check ✅ Passed The pull request successfully addresses issue #229 by implementing a ThemeProvider with class-based theming and using next-themes' useTheme hook with proper mounting state to prevent theme flash on page refresh.
Out of Scope Changes check ✅ Passed All changes in app/layout.jsx and components/theme-toggler.tsx are directly related to fixing the theme flash issue by integrating next-themes and managing hydration warnings.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
components/theme-toggler.tsx (1)

18-20: Pre-mount placeholder should be non-interactive.

Line 19 uses opacity-0, which still leaves the button focusable/clickable for keyboard and assistive tech. Consider adding disabled, aria-hidden, and tabIndex={-1} for the pre-mount placeholder.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@components/theme-toggler.tsx` around lines 18 - 20, The pre-mount placeholder
button rendered when the component-level variable mounted is false is visually
hidden with opacity-0 but remains focusable; update that placeholder (the
returned button element in the mounted check) to be non-interactive by adding
disabled, aria-hidden="true", and tabIndex={-1} attributes so it cannot be
focused or activated by keyboard/assistive tech while the real control is not
mounted.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@components/theme-toggler.tsx`:
- Line 11: The component currently reads const {theme, setTheme} = useTheme()
but uses theme for toggle state and icon logic which can be 'system' and not
reflect the actual UI; change the destructure to const {theme, resolvedTheme,
setTheme} = useTheme() and use resolvedTheme for both the toggle/check state and
the icon display (e.g., use resolvedTheme === 'dark' to decide icon and to
compute the new value when calling setTheme, e.g., setTheme(resolvedTheme ===
'dark' ? 'light' : 'dark')), leaving setTheme unchanged for updating the
preference.

---

Nitpick comments:
In `@components/theme-toggler.tsx`:
- Around line 18-20: The pre-mount placeholder button rendered when the
component-level variable mounted is false is visually hidden with opacity-0 but
remains focusable; update that placeholder (the returned button element in the
mounted check) to be non-interactive by adding disabled, aria-hidden="true", and
tabIndex={-1} attributes so it cannot be focused or activated by
keyboard/assistive tech while the real control is not mounted.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 65f0c9a6-f33e-41f4-829e-7626a536e19e

📥 Commits

Reviewing files that changed from the base of the PR and between 10e2e8b and 3feede3.

📒 Files selected for processing (2)
  • app/layout.jsx
  • components/theme-toggler.tsx

Comment thread components/theme-toggler.tsx Outdated
@anurag2787 anurag2787 self-requested a review April 12, 2026 04:29
Copy link
Copy Markdown
Collaborator

@anurag2787 anurag2787 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Ayush-2511 please address the coderabbitai comment

@Ayush-2511 Ayush-2511 requested a review from anurag2787 April 12, 2026 10:31
Copy link
Copy Markdown
Collaborator

@anurag2787 anurag2787 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@anurag2787 anurag2787 merged commit 63fe95e into iiitl:main Apr 12, 2026
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: Light Mode Flash on Refresh while using Dark Mode

2 participants