Skip to content

feat(ui): add custom themed scrollbar across all pages#1663

Merged
omroy07 merged 1 commit intoomroy07:mainfrom
nur-hasin:feat/custom-themed-scrollbar
Feb 27, 2026
Merged

feat(ui): add custom themed scrollbar across all pages#1663
omroy07 merged 1 commit intoomroy07:mainfrom
nur-hasin:feat/custom-themed-scrollbar

Conversation

@nur-hasin
Copy link
Copy Markdown
Contributor

Which issue does this PR close?

Rationale for this change

Default browser scrollbars break visual consistency across AgriTech's themed UI. Custom scrollbars using the existing CSS variable system ensure every page maintains a cohesive, modern appearance across all theme variants (dark/light) without any additional JavaScript or new files. This is a pure CSS UI polish change to enhance the modern feel of the platform.

What changes are included in this PR?

Common change applied across all 16 pages (home, about, blog, news, community-forum, faq, crop-monitoring, supply-chain, sustainable-farming, marketplace, financial-support, finance-bot, contact, feedback, privacy-policy, yield-prediction) - same scrollbar block added to each:

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

Some pages required a custom color palette created based on the page theme, these pages did not have the necessary CSS variable tokens (--bg-secondary, --border-color, --text-muted) in their existing :root or [data-theme="dark"] blocks.

Are these changes tested?

Manually tested across:

  • All pages in Chrome, Edge and Firefox
  • Dark and light theme on every page
  • Hover transition verified on all pages
  • Overflow containers (modals, chat windows, lists) on mobile and desktop
  • No broken variable references confirmed in both theme modes
  • Pure CSS change - no logic or functionality affected, no automated tests required

Are there any user-facing changes?

Yes:

  • Scrollbar now blends with each page background across all themes
  • Thumb hover turns muted/accent tone - consistent with AgriTech brand
  • Replaces jarring default OS scrollbar across all pages
  • Consistent width and border-radius for modern uniform look
  • Fully reactive to theme switching via CSS custom properties
  • No breaking changes to any existing layout, theme or functionality

Screenshots

Screenshot 2026-02-27 023049 Screenshot 2026-02-27 023110 Screenshot 2026-02-27 023416 Screenshot 2026-02-27 023430 Screenshot 2026-02-27 023330 Screenshot 2026-02-27 023609 Screenshot 2026-02-27 023624 Screenshot 2026-02-27 023306

@vercel
Copy link
Copy Markdown

vercel bot commented Feb 26, 2026

@nur-hasin is attempting to deploy a commit to the Om Roy's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

@nur-hasin
Copy link
Copy Markdown
Contributor Author

nur-hasin commented Feb 26, 2026

Hi @omroy07, as requested before, please add the SWoC26 label to my PR. I'm in both programs, so both labels are needed. If only one can be added, prioritize SWoC26.

@omroy07 omroy07 merged commit c951ad6 into omroy07:main Feb 27, 2026
2 of 5 checks passed
@github-actions
Copy link
Copy Markdown

🎉 Congrats @nur-hasin on getting your PR merged! 🙌
Thanks for the contribution — looking forward to more from you 🚀

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.

[ENHANCEMENT]: Implement Custom Styled Scrollbar to Enhance Modern UI Experience

2 participants