feature: add light mode toggle and global theme support

[aadya284]

Description

Description

This PR introduces a Light Mode toggle functionality to the application.

A theme toggle button (Sun/Moon icon) has been added to the navbar, allowing users to switch between Dark Mode (default) and Light Mode. The selected theme is persisted using local storage and applied globally via a theme context and class-based styling.

The implementation ensures:

• Smooth transition between themes
• Persistent theme selection across refresh
• Minimal modification to existing components
• No disruption to current Dark Mode design

Fixes #[ISSUENO]

---

Dependencies

No additional external dependencies were added.

The implementation uses:

• Existing React Context (themeContext)
• Tailwind class-based theming (dark class)
• Global SCSS adjustments

---

Future Improvements

• Improve visual refinement of light mode surfaces (cards, shadows, borders).
• Introduce semantic color tokens for better theme scalability.
• Add system preference detection (prefers-color-scheme).
• Add animation enhancements for smoother theme transitions.
• Add unit tests for theme persistence behavior.

---

Mentions

@maintainers
(Replace with actual maintainer usernames if required)

---

Screenshots of relevant screens

Dark Mode (Default)

Add screenshot here

Light Mode

Add screenshot here

---

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the Coding Guidelines
• My changes in code generate no new warnings
• My changes are not breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues
  Give a summary of the change that you have made

Fixes #[ISSUENO]

Dependencies

Mention any dependencies/packages used

Future Improvements

Mention any improvements to be done in future related to any file/feature

Mentions

Mention and tag the people

Screenshots of relevant screens

Add screenshots of relevant screens

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the Coding Guidelines
• My changes in code generate no new warnings
• My changes are not breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Note:

The only remaining visual inconsistency is the logo in Light Mode.
Since the current logo asset is a JPG with a dark background, it does not adapt well to the light theme.

If a light-mode compatible logo (transparent PNG/SVG or alternate variant) is provided, I would be happy to open a separate PR to improve this further.

[rishima17]

@aadya284 please raise pr against develop branch instead of main.

[aadya284]

@rishima17 Thank you for pointing that out. I’ve updated the PR to target the develop branch.

[aadya284]

@SyedFahad7 @rishima17 kindly review my pr and merge it

[SyedFahad7]

Please sync your PR branch with the latest develop before re-review.

Use rebase (preferred) instead of merging develop into your feature branch to keep history clean:

git fetch upstream
git rebase upstream/develop
Resolve conflicts, then run local checks (npm run lint and npm run build)
git push --force-with-lease origin
Notes:

No need to fix unrelated pre-existing warnings across the repo.
Do fix any errors introduced by your PR (especially in touched files).
Rebase rewrites only your PR branch history; it does not rewrite our develop branch.
Once updated, we’ll re-review quickly.

[aadya284]

@SyedFahad7 Rebased the branch on the latest develop.

Local checks performed:

• npm run lint
• npm run build

Build completed successfully. Updated branch pushed for re-review.

[SyedFahad7]

Good start on theme toggle and persistence, and build/lint are passing.

Blocking concerns before merge:
ThemeProvider returns null until client load (app/contexts/themeContext.tsx), which blanks the app on refresh.
Light mode uses very broad global overrides (app/styles/global.scss with [class*="..."], div/section selectors, many !important), which is brittle and likely to cause regressions.
PR adds an extra floating global toggle (app/layout.tsx) in addition to navbar toggle; this goes beyond the stated scope.
Please wrap localStorage access in try/catch for safer persistence handling.

After these are addressed, theme architecture will be much cleaner and more maintainable.

[aadya284]

@SyedFahad7 I have addressed the changes you told please re-review it

[SyedFahad7]

Thanks for addressing the previously requested blockers.

I re reviewed the latest commit and can confirm the architectural issues mentioned earlier appear to be resolved:

• ThemeProvider no longer blanks the application during initial load
• localStorage access is now wrapped in try catch for safer persistence handling
• The extra floating global toggle has been removed
• Global light mode CSS overrides are now more targeted and safer

Build and lint checks are also passing.

However, there are significant UI regressions introduced by this PR that need to be addressed before merge.

The project originally had a well styled dark theme, but several visual aspects of the existing UI have been unintentionally modified. The goal of this PR should be to add light mode support without altering the current dark mode design.

Current concerns:

1. Dark mode UI has changed
   The default dark theme previously used in the site has visual differences now. Spacing, typography, and styling appear altered compared to the existing production design. Dark mode should remain visually identical to the original implementation.

2. Typography changes
   The font styling and letter spacing appear different from the existing design, which makes the UI look inconsistent.

3. Light mode implementation is incomplete
   Several components do not have proper background and contrast handling in light mode:

   • Some components retain dark styling
   • Some areas lack proper background colors
   • Text contrast becomes difficult to read in certain places

4. Logo visibility issue
   The BetterBugs logo is not visible in light mode due to the asset background.

5. Navbar button styling
   The "Get started" button styling looks visually broken compared to the original design.

6. Footer regression
   The footer styling has degraded. The "All services are online" component now has an unnecessary white background and reduced readability.

Suggested approach:

To keep the implementation maintainable and aligned with the project design:

• Keep dark mode styles exactly the same as the existing UI
• Implement light mode by reversing background and text colors where necessary
• Avoid modifying typography or spacing from the original design
• Ensure proper contrast for readability in both themes
• Keep the implementation minimal and avoid unnecessary global overrides

Once the UI parity with the original dark theme is restored and light mode styling is cleaned up, this PR should be good to merge.

[aadya284]

@SyedFahad7 Addressed the UI regressions mentioned in the review.

Updates made:
• Restored original dark mode appearance
• Scoped light mode styles using [data-theme="light"]
• Removed unintended global overrides
• Fixed BetterBugs logo visibility in light mode
• Restored navbar button styling
• Corrected footer badge background regression

Dark mode remains unchanged from the original design while light mode now applies targeted color overrides only.

Local verification:
npm run lint
npm run build

Ready for re-review.

[SyedFahad7]

Thanks for the quick iteration and for addressing the earlier architectural and UI issues. The theme toggle functionality is working and the previous blockers around provider behavior, global overrides, and component regressions are improved.

However, after testing the latest changes there are still a few UI and branding inconsistencies that need to be corrected before this can be merged.

Current issues observed:

1. Brand logo color
   The BetterBugs logo should not change color across themes. In the current light mode implementation the logo becomes fully black. Our brand icon should remain the original green in both dark and light modes. Only the surrounding text or UI elements should adapt to theme changes.

2. Light mode contrast and surfaces
   Some UI surfaces in light mode still look visually flat or inconsistent compared to the dark theme version. Components such as the filter sidebar, cards, and badges should have clearer background contrast and maintain visual hierarchy.

3. Filter panel styling
   The category buttons and filter pills in light mode look slightly inconsistent compared to the dark version. The borders and backgrounds should be adjusted so they feel like the same component system rather than a separate design.

4. Footer alignment with theme
   The footer now renders correctly, but please ensure that icon colors, badge styling, and background surfaces follow the same theme logic used across the rest of the layout.

Suggested approach:

• Keep the BetterBugs logo color unchanged (green) in both themes
• Preserve the existing dark mode design exactly as it was
• Apply light mode by inverting background and text colors while keeping the same component structure
• Maintain consistent surfaces for cards, filters, and badges so both themes feel like the same UI system

Once these branding and visual consistency issues are corrected, this should be in a good state for approval.

Thanks again for the continued updates.

[aadya284]

@SyedFahad7 Since the current logo asset is a JPG with a dark background, it does not adapt well to the light theme.
If a light-mode compatible logo (transparent PNG/SVG or alternate variant) is provided, I would be happy to open a separate PR to improve this further or continue in this PR only, Regarding the other changes i will work on that, sorry for not doing it properly

[aadya284]

@SyedFahad7 i have addressed the changes you told, kindly review