feat: Replace default browser scrollbar with custom themed scrollbar

[thenabbu]

Summary

The website uses the default browser scrollbar which visually clashes with DevCard's
theme. A custom CSS scrollbar matching the site's color palette would improve
UI consistency and overall polish.

Context

On Chromium-based browsers, the default scrollbar is visually heavy and does not
blend with the dark/themed UI of DevCard. This is especially noticeable on the
DevCard profile view screen. A lightweight CSS-only fix using ::-webkit-scrollbar
pseudo-elements (Chromium/Safari) and scrollbar-color (Firefox) can resolve this
without any JavaScript.

Tasks

• Identify the theme accent colors / CSS variables from the existing Tailwind config or app.css
• Implement custom scrollbar styles in the global stylesheet
• Test appearance across different browsers

[thenabbu]

@Harxhit i would like to be assigned to this issue under GSSOC'26

[tech-dipesh]

/assign gssoc

[Sadik159]

Hi @thenabbu

I analyzed the scrollbar issue on the DevCard profile view and identified a clean CSS-only approach that can improve the overall UI consistency without adding any extra dependencies.

My approach would include:

• Inspecting the existing Tailwind theme variables and color tokens
• Implementing lightweight custom scrollbar styling using ::-webkit-scrollbar and scrollbar-color
• Matching the scrollbar with the current dark/glassmorphism UI
• Ensuring cross-browser compatibility for Chrome, Edge, Brave, Safari, and Firefox
• Keeping the implementation fully global and maintainable through existing theme variables

This looks like a low-risk UI enhancement with noticeable visual improvement, especially on profile/detail pages where scrolling is more visible.

I’d like to work on this issue if it can be assigned to me.

[smirk-dev]

I'd like to work on this under GSSoC'26. My plan: pull existing Tailwind color tokens (e.g. the primary/accent palette), apply ::webkit-scrollbar and scrollbar-color in the global stylesheet, and test across Chrome, Firefox, and Safari. It's a clean CSS-only change with no JS required. Please assign this to me!

[Harxhit]

@smirk-dev I have assigned this issue to you based on the clear implementation approach and technical details you provided. Please proceed with the changes and keep the scope aligned with the issue requirements.

[smirk-dev]

@Harxhit thanks, you will have the pr soon!

[smirk-dev]

@Harxhit can you please add all relevant gssoc tags please, otherwise my contribution won't count

[Harxhit]

@Harxhit can you please add all relevant gssoc tags please, otherwise my contribution won't count

Contributions are counted through PR labels, not issue labels. You can learn more through our Discord #announcements channel: https://discord.gg/E29mKkQt8

[smirk-dev]

alright, none the less, ui pr created @Harxhit and mentioned in the pr