feature: add light mode toggle and global theme support by aadya284 · Pull Request #29 · betterbugs/dev-tools

aadya284 · 2026-02-27T07:01:44Z

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 · 2026-02-27T11:32:52Z

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

aadya284 · 2026-02-27T13:02:09Z

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

aadya284 · 2026-02-28T15:46:21Z

@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 · 2026-03-06T17:38:51Z

@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 · 2026-03-06T18:58:00Z

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 · 2026-03-07T16:21:36Z

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

SyedFahad7 · 2026-03-07T20:18:17Z

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:

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.
Typography changes
The font styling and letter spacing appear different from the existing design, which makes the UI look inconsistent.
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
Logo visibility issue
The BetterBugs logo is not visible in light mode due to the asset background.
Navbar button styling
The "Get started" button styling looks visually broken compared to the original design.
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 · 2026-03-08T09:37:50Z

@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:

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.
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.
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.
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 · 2026-03-09T14:04:21Z

@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 · 2026-03-09T15:07:13Z

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

aadya284 · 2026-03-10T07:36:55Z

@SyedFahad7 can you please review the changes

SyedFahad7 · 2026-03-10T08:59:26Z

check this out @aadya284 https://drive.google.com/file/d/16wMuvsgIxr_4W2prtaUhkbYo7uX4FDs5/view?usp=sharing
I've highlighted some UI issues in the screen recording

SyedFahad7 · 2026-03-10T09:43:57Z

@aadya284 try this https://drive.google.com/file/d/16wMuvsgIxr_4W2prtaUhkbYo7uX4FDs5/view?usp=sharing

aadya284 · 2026-03-10T15:40:56Z

@SyedFahad7 thankyou for sharing screen recording it really showed me what exaclty was wrong, i have corrected everything you showed in the recording, kindly review it

SyedFahad7 · 2026-03-11T00:09:11Z

@aadya284 Use logos from here for light mode https://glacier-stoat-1fd.notion.site/Visual-guidelines-9bc9e9d9bc8782b7a3870154cc390944

aadya284 · 2026-03-11T15:54:38Z

@SyedFahad7 please check the logo, i have changed it for light mode, kindly review

SyedFahad7

Hey @aadya284 Thanks for the changes.

Found a little more issues. Here's a screen recorded video.
https://drive.google.com/file/d/1obv7iO10pxhx4Tbqmd4UG3JUerkd-BKq/view?usp=sharing

Logo to replaced as shown in the video.
Both the 'Add to Chrome Button's ' on a tool's page, bg can be made black
social icons don't have any spacing. add gap and remove grey bg with border. only apply on hover color change to the icons not on each icons parent div. let layout and hover styles it be similar to dark mode only revert colors in light mode for static and hover.

aadya284 · 2026-03-12T17:44:59Z

@SyedFahad7 i have made the changes, kindly review

aadya284 · 2026-03-14T13:57:07Z

@SyedFahad7 please review

aadya284 · 2026-03-16T03:01:18Z

@SyedFahad7 any update?it's been 4 days

aadya284 · 2026-03-18T14:10:48Z

@SyedFahad7 it would be good if you share any update regarding this issue, I know aperture 3.0 is finished but i have worked too much on this issue.

aadya284 · 2026-03-26T18:18:33Z

@SyedFahad7 any update?

SyedFahad7 · 2026-04-11T13:59:40Z

Hey @aadya284, sorry I couldn’t get back to you earlier — we had paused OS work for a bit.

I’ve gone through the PR now, and everything looks good from my side. Nice work sticking through all the iterations.

There’s just one last thing left before we can move forward: your branch is not up to date with the latest develop branch. Please rebase it with the latest changes and push again.

Once that’s done, we should be good to proceed 👍

aadya284 · 2026-04-11T14:21:11Z

@SyedFahad7 its alright , thankyou for responding, I have rebased the branch with the latest develop branch and updated the PR.

SyedFahad7

LGTM!

aadya284 · 2026-04-11T14:25:14Z

@SyedFahad7 thankyou for cooperating and guiding me, this was my first major open source contribution!

SyedFahad7 · 2026-04-11T14:28:45Z

@SyedFahad7 thankyou for cooperating and guiding me, this was my first major open source contribution!

That’s awesome to hear @aadya284 😄 we’re really happy to be your first open source repo!

Feel free to raise new issues or ask to get assigned to any existing ones anytime, we’d love to have you contribute more. Beautiful work on this PR 👏

PS: We’d love it if you wrote a blog or shared a LinkedIn post about your experience :D

aadya284 · 2026-04-13T15:03:42Z

@SyedFahad7 i just was curious that will my change be visible on the actual website deployed version?i would love to see it!!

SyedFahad7 · 2026-04-13T15:05:18Z

@SyedFahad7 i just was curious that will my change be visible on the actual website deployed version?i would love to see it!!

Hey, we're waiting on some more contributions & we'll put it on prod all together :)

aadya284 · 2026-04-13T15:07:31Z

@SyedFahad7 okayy!!, i would love to contribute more even if its existing PRs if no one is doing them :)

* feat(ui): add reusable CopyButton and refactor wordCounter and jsonToTxt Adds a reusable CopyButton component and refactors WordCounter and JsonToTxt to use it. Fixes #17 * chore(release): 1.4.0-develop.1 [skip ci] # [1.4.0-develop.1](v1.3.2...v1.4.0-develop.1) (2026-02-28) ### Features * **ui:** add reusable CopyButton and refactor wordCounter and jsonToTxt ([d5b9e83](d5b9e83)), closes [#17](#17) * fix(tools): implement proper bcrypt generator Replaces placeholder hashing logic with bcryptjs implementation as contributed in PR #23 Adds proper salt generation and verification using bcrypt.compare. Fixes #13 * chore(release): 1.4.0-develop.2 [skip ci] # [1.4.0-develop.2](v1.4.0-develop.1...v1.4.0-develop.2) (2026-02-28) ### Bug Fixes * **tools:** implement proper bcrypt generator ([94d19be](94d19be)), closes [#23](#23) [#13](#13) * Add Curl to Code Converter (#25) closes: #21 Co-authored-by: Syed Fahad <sfahad2904@gmail.com> * feat: Add Smart Repair feature to JSON Validator (#41) Closes #38 * feat. json to csv convertor (#26) * feat. json to csv convertor * align checkbox Fixes #18 * chore: initialize eslint configuration * feat: Add IPv4 Subnet Calculator Tool This pull request implements a specialized IPv4 Subnet Calculator tool for network engineers and DevOps professionals. The tool simplifies network planning and infrastructure setup by instantly calculating subnet details from an IP address and CIDR prefix or subnet mask. closes #33 * chore: sync package-lock with package.json * chore(release): 1.4.0-develop.3 [skip ci] # [1.4.0-develop.3](v1.4.0-develop.2...v1.4.0-develop.3) (2026-03-03) ### Features * Add IPv4 Subnet Calculator Tool ([ad1c03f](ad1c03f)), closes [#33](#33) * Add Smart Repair feature to JSON Validator ([#41](#41)) ([7a3c7a5](7a3c7a5)), closes [#38](#38) * feat: Add lockfile guard workflow to prevent unintended lockfile changes * chore(release): 1.4.0-develop.4 [skip ci] # [1.4.0-develop.4](v1.4.0-develop.3...v1.4.0-develop.4) (2026-03-03) ### Features * Add lockfile guard workflow to prevent unintended lockfile changes ([aa20fb5](aa20fb5)) * feat(tools): add SVG to React/CSS utility * feat(tools): add SVG to React/CSS utility Add SVG converter tool that transforms raw SVG code into optimized variants: - React Component: Clean, reusable functional component with dynamic sizing - CSS Data URI: Inline SVG for CSS background images - CSS Mask: SVG as CSS mask-image for flexible icon styling Features: - Automatic metadata cleanup (removes XML declarations, comments, DOCTYPE) - viewBox preservation for responsive sizing - Optional currentColor replacement for theme support - Configurable default width/height - File upload support (.svg files) - Copy-to-clipboard functionality Closes #50 * fix(release): update GITHUB_TOKEN to use RELEASE_TOKEN for semantic release * chore(release): 1.4.0-develop.5 [skip ci] # [1.4.0-develop.5](v1.4.0-develop.4...v1.4.0-develop.5) (2026-03-05) ### Bug Fixes * **release:** update GITHUB_TOKEN to use RELEASE_TOKEN for semantic release ([be3a012](be3a012)) ### Features * **tools:** add SVG to React/CSS utility ([218ccad](218ccad)), closes [#50](#50) * Favourite Feature Added (#77) Added a favourite tool feature. Favourite tools are pushed to top. Added a filter for favourite tools. Closes #61 * feat: Add Unix Timestamp (Epoch) Converter Utility Closes: #16 * chore(release): 1.4.0-develop.6 [skip ci] # [1.4.0-develop.6](v1.4.0-develop.5...v1.4.0-develop.6) (2026-03-08) ### Features * Add Unix Timestamp (Epoch) Converter Utility ([f277272](f277272)), closes [#16](#16) * feat(tools): add Unix Timestamp Converter to development tools list * chore(release): 1.4.0-develop.7 [skip ci] # [1.4.0-develop.7](v1.4.0-develop.6...v1.4.0-develop.7) (2026-03-08) ### Features * **tools:** add Unix Timestamp Converter to development tools list ([3fedf57](3fedf57)) * feat: Added URL parser & Query Editor Tool Closes : #51 * chore(release): 1.4.0-develop.8 [skip ci] # [1.4.0-develop.8](v1.4.0-develop.7...v1.4.0-develop.8) (2026-03-08) ### Features * Added URL parser & Query Editor Tool ([c9933ba](c9933ba)), closes [#51](#51) * feature: add light mode toggle and global theme support #29 Closes: #14 * feat: add class-validator dependency and update page styles (#81) - Added `class-validator` package to `package.json`. - Adjusted styles in `page.tsx` for sidebar positioning and button margin. - Refined text styles in `[slug]/page.tsx` for better readability. - Updated descriptions in `constants.tsx` for JSON tools to enhance clarity. Co-authored-by: Mohit Mali <mohit@linearloop.io> --------- Co-authored-by: Harryson <168550932+HarrysonLadines@users.noreply.github.com> Co-authored-by: semantic-release-bot <semantic-release-bot@martynus.net> Co-authored-by: Sayak Datta <174126344+datta-sayak@users.noreply.github.com> Co-authored-by: Omkar <182200831+omkarhole@users.noreply.github.com> Co-authored-by: Syed Fahad <sfahad2904@gmail.com> Co-authored-by: Uday Kiran <132606304+udaykiran243@users.noreply.github.com> Co-authored-by: Madhav Majumdar <161720210+madhav2348@users.noreply.github.com> Co-authored-by: Gaurav Karakoti <karakotigaurav12@gmail.com> Co-authored-by: Aadya Paradkar <aadyaparadkar@gmail.com> Co-authored-by: zeel0m <137067026+zeel0m@users.noreply.github.com>

SyedFahad7 · 2026-04-14T10:14:58Z

🎉 This PR is included in version 1.4.0-develop.9 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

aadya284 changed the base branch from main to develop February 27, 2026 13:01

rishima17 assigned aadya284 Feb 27, 2026

rishima17 requested a review from SyedFahad7 February 27, 2026 16:37

rishima17 added enhancement New feature or request apertre3.0 medium labels Feb 27, 2026

SyedFahad7 requested changes Mar 6, 2026

View reviewed changes

aadya284 force-pushed the feature/light-mode-toggle branch from ec60d5e to cbb77d0 Compare March 6, 2026 17:36

SyedFahad7 requested review from SyedFahad7 and removed request for SyedFahad7 March 7, 2026 19:30

SyedFahad7 requested changes Mar 8, 2026

View reviewed changes

aadya284 force-pushed the feature/light-mode-toggle branch from 98568b2 to 5c630ce Compare March 9, 2026 15:06

SyedFahad7 self-requested a review March 11, 2026 20:59

SyedFahad7 requested changes Mar 11, 2026

View reviewed changes

Rebased with latest develop

75600d5

aadya284 force-pushed the feature/light-mode-toggle branch from e5de613 to 75600d5 Compare April 11, 2026 14:20

SyedFahad7 self-requested a review April 11, 2026 14:22

SyedFahad7 approved these changes Apr 11, 2026

View reviewed changes

SyedFahad7 merged commit 328cdfa into betterbugs:develop Apr 11, 2026

aadya284 deleted the feature/light-mode-toggle branch April 13, 2026 15:03

SyedFahad7 added the released label Apr 14, 2026

Conversation

aadya284 commented Feb 27, 2026

Description

Description

Dependencies

Future Improvements

Mentions

Screenshots of relevant screens

Dark Mode (Default)

Light Mode

Developer's checklist

Dependencies

Future Improvements

Mentions

Screenshots of relevant screens

Developer's checklist

Uh oh!

rishima17 commented Feb 27, 2026

Uh oh!

aadya284 commented Feb 27, 2026

Uh oh!

aadya284 commented Feb 28, 2026

Uh oh!

SyedFahad7 left a comment

Choose a reason for hiding this comment

Uh oh!

aadya284 commented Mar 6, 2026

Uh oh!

SyedFahad7 commented Mar 6, 2026

Uh oh!

aadya284 commented Mar 7, 2026

Uh oh!

SyedFahad7 commented Mar 7, 2026

Uh oh!

aadya284 commented Mar 8, 2026

Uh oh!

SyedFahad7 left a comment

Choose a reason for hiding this comment

Uh oh!

aadya284 commented Mar 9, 2026

Uh oh!

aadya284 commented Mar 9, 2026

Uh oh!

aadya284 commented Mar 10, 2026

Uh oh!

SyedFahad7 commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SyedFahad7 commented Mar 10, 2026

Uh oh!

aadya284 commented Mar 10, 2026

Uh oh!

SyedFahad7 commented Mar 11, 2026

Uh oh!

aadya284 commented Mar 11, 2026

Uh oh!

SyedFahad7 left a comment

Choose a reason for hiding this comment

Uh oh!

aadya284 commented Mar 12, 2026

Uh oh!

aadya284 commented Mar 14, 2026

Uh oh!

aadya284 commented Mar 16, 2026

Uh oh!

aadya284 commented Mar 18, 2026

Uh oh!

aadya284 commented Mar 26, 2026

Uh oh!

SyedFahad7 commented Apr 11, 2026

Uh oh!

aadya284 commented Apr 11, 2026

Uh oh!

SyedFahad7 left a comment

Choose a reason for hiding this comment

Uh oh!

aadya284 commented Apr 11, 2026

Uh oh!

SyedFahad7 commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SyedFahad7 commented Mar 10, 2026 •

edited

Loading

SyedFahad7 commented Apr 11, 2026 •

edited

Loading

SyedFahad7 commented Apr 13, 2026 •

edited

Loading