Skip to content

Fix/dark mode toggle - #29

Closed
Vachhani-Tapan wants to merge 1 commit into
udaycodespace:mainfrom
Vachhani-Tapan:fix/dark-mode-toggle
Closed

Fix/dark mode toggle#29
Vachhani-Tapan wants to merge 1 commit into
udaycodespace:mainfrom
Vachhani-Tapan:fix/dark-mode-toggle

Conversation

@Vachhani-Tapan

@Vachhani-Tapan Vachhani-Tapan commented Jul 22, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Fixes : #27

 The dark mode toggle button in the navbar called `document.body.classList.add('dark-  
 mode')` on click, but no `.dark-mode` CSS rules existed anywhere in the project.      
 Clicking the toggle had zero visual effect.

 Added comprehensive `.dark-mode` styles in `App.css` that override CSS custom         
 properties (`--paper`, `--ink`, `--ink-soft`, `--line`, `--white`, `--shadow`) and    
 adjust component backgrounds (landing page, catalog cards, toolbar, search input,     
 navbar) to create a proper dark color scheme. The toggle now successfully switches    
 between light and dark themes.

 Closes #27

 ## Type of Change

 - [x] 🐛 Bug fix (non-breaking change which fixes an issue)

 ## Checklist

 - [x] My code follows the style guidelines of this project.
 - [x] I have performed a self-review of my own code.
 - [x] My changes generate no new warnings or console errors.
 - [ ] I have tested my changes locally and verified they work as expected.

 ## Screenshots / Screen Recordings (if applicable)

 N/A - CSS-only change

@udaycodespace
udaycodespace self-requested a review July 22, 2026 08:51
@udaycodespace udaycodespace added ECSoC26 Required label for a PR to be eligible for Sentinel scoring ECSoC26-L1 Easy difficulty, auto-assigned by Sentinel — 5 points good-ui PA-awarded bonus for outstanding UI/UX work — +25 XP in review PR is up and waiting on maintainer review and removed frontend labels Jul 22, 2026
@udaycodespace

udaycodespace commented Jul 22, 2026

Copy link
Copy Markdown
Owner

@Vachhani-Tapan Thanks for bundling the changes, this is the kind of grouping I'd like to see.

Before I merge, please attach a screenshot or short screen recording of the dark mode changes so I can verify the UI.

@udaycodespace udaycodespace added redo Reviewed — needs changes before it can be merged and removed in review PR is up and waiting on maintainer review labels Jul 22, 2026
@Vachhani-Tapan

Vachhani-Tapan commented Jul 23, 2026

Copy link
Copy Markdown
Contributor Author
image image

@udaycodespace udaycodespace added in review PR is up and waiting on maintainer review and removed redo Reviewed — needs changes before it can be merged labels Jul 23, 2026
@udaycodespace

udaycodespace commented Jul 23, 2026

Copy link
Copy Markdown
Owner

image image

Thanks for the fix! The toggle now has corresponding styles and this is moving in the right direction.

Before merging, could you please:

  • Test the feature locally and update the PR checklist.
  • Verify the dark theme across all major pages/components to ensure readability and consistency.
  • Confirm whether the selected theme persists after a page refresh. If persistence is outside the scope of this PR, please mention that in the PR description.

Once these are addressed, I'll review it again. Thanks!

@udaycodespace udaycodespace added redo Reviewed — needs changes before it can be merged and removed in review PR is up and waiting on maintainer review labels Jul 23, 2026
@udaycodespace

udaycodespace commented Jul 25, 2026

Copy link
Copy Markdown
Owner

image image

Thanks for the contribution.

Closing this PR since the requested review changes weren't completed. If another contributor submits a complete solution for this issue first, I'll proceed with that PR instead.

You're welcome to submit a new PR for a different issue. Thanks!

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

Reviewers

@udaycodespace udaycodespace Awaiting requested review from udaycodespace

Assignees

@Vachhani-Tapan Vachhani-Tapan

Labels

ECSoC26-L1 Easy difficulty, auto-assigned by Sentinel — 5 points ECSoC26 Required label for a PR to be eligible for Sentinel scoring good-ui PA-awarded bonus for outstanding UI/UX work — +25 XP redo Reviewed — needs changes before it can be merged

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Dark Mode Toggle Does Nothing

2 participants

@Vachhani-Tapan @udaycodespace