Skip to content

fix(theme): persist dark mode in localStorage and sync html class - #2194

Merged
utksh1 merged 4 commits into
utksh1:mainfrom
manassanjaymishra24:fix/theme-toggle-persistence
Aug 5, 2026
Merged

fix(theme): persist dark mode in localStorage and sync html class#2194
utksh1 merged 4 commits into
utksh1:mainfrom
manassanjaymishra24:fix/theme-toggle-persistence

Conversation

@manassanjaymishra24

@manassanjaymishra24 manassanjaymishra24 commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Description

Fixed the dark/light mode toggle state persistence and DOM synchronization in ThemeContext.tsx. The theme preference now correctly persists across page reloads using localStorage and dynamically adds/removes the dark class on the root <html> element for proper Tailwind CSS styling.

Related Issues

Closes #2061

Type of Change

  • 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

How Has This Been Tested?

  • Tested locally in the frontend development server (http://localhost:5173).
  • Mocked/bypassed the OpenRouter API & backend authentication locally to access and visually validate the dashboard interface.
  • Verified via Browser DevTools that the dark class toggles dynamically on the <html> root element.
  • Confirmed that theme selections persist across browser refreshes via localStorage.
Screenshot 2026-07-24 181731 Screenshot 2026-07-24 181717

Checklist

  • My code follows the code style 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.

@manassanjaymishra24

manassanjaymishra24 commented Jul 24, 2026

Copy link
Copy Markdown
Contributor Author

Hi @utksh1,
I noticed the SecuScan CI / backend-unit check failed on testing/backend/unit/test_saved_views.py.
Just wanted to clarify that this PR only modifies frontend files (frontend/src/components/ThemeContext.tsx) for the theme persistence fix. The backend test failure appears to be caused by a pre-existing dependency override in the app_client fixture that bypasses auth on tests expecting 401 responses.
Would you prefer I commit the quick fix for test_saved_views.py directly into this branch, or keep this PR focused strictly on the frontend and address the test fix in a separate PR/issue?

@utksh1 utksh1 added area:frontend Frontend React/UI work level:beginner 20 pts difficulty label for small beginner-friendly PRs type:bug Bug fix work category bonus label labels Jul 30, 2026 — with ChatGPT Codex Connector
@utksh1 utksh1 mentioned this pull request Jul 30, 2026
Closed
@manassanjaymishra24

manassanjaymishra24 commented Aug 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Hi @utksh1, kindly review the code

utksh1
utksh1 approved these changes Aug 4, 2026
View reviewed changes

@utksh1 utksh1 left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

Reviewed the current diff. The system-theme query now matches the dark preference correctly, and localStorage access is guarded for environments where storage is unavailable while preserving manual overrides and reset behavior. The branch still needs a fresh rebase and required checks before merge.

@utksh1
utksh1 force-pushed the fix/theme-toggle-persistence branch from 6bff2b5 to d8008aa Compare August 4, 2026 11:40
@utksh1

utksh1 commented Aug 4, 2026

Copy link
Copy Markdown
Owner

Fresh required CI is blocked at the shared frontend npm audit gate by high-severity undici advisory GHSA-4cwx-7wf7-3272. This PR does not change dependencies; approval remains in place while the repository-level audit issue is unresolved.

@manassanjaymishra24

manassanjaymishra24 commented Aug 4, 2026

Copy link
Copy Markdown
Contributor Author

Hi @utksh1,
All the necessary changes have been made and the code is ready to be merged
Thank You!!

@utksh1
utksh1 force-pushed the fix/theme-toggle-persistence branch from c7005ae to ea9399c Compare August 5, 2026 07:47
utksh1
utksh1 approved these changes Aug 5, 2026
View reviewed changes

@utksh1 utksh1 left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

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

Reviewed the rebased head, including the theme fix and the dependency lockfile conflict resolution. npm ci dry-run and all required CI contexts pass; approved for squash merge.

@utksh1
utksh1 merged commit c242c01 into utksh1:main Aug 5, 2026
33 checks passed
@utksh1 utksh1 added the gssoc:approved Admin validation: approved for GSSoC scoring label Aug 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@utksh1 utksh1 utksh1 approved these changes

Assignees

No one assigned

Labels

area:frontend Frontend React/UI work gssoc:approved Admin validation: approved for GSSoC scoring level:beginner 20 pts difficulty label for small beginner-friendly PRs type:bug Bug fix work category bonus label

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] Bright and Dark mode toggle is non-functional

2 participants

@manassanjaymishra24 @utksh1