From 721185e1e5a367afb220549e52c127b826f756b1 Mon Sep 17 00:00:00 2001
From: smirk-dev <suryansh.mishra.sm6@gmail.com>
Date: Tue, 19 May 2026 12:34:31 +0530
Subject: [PATCH] feat: add themed custom scrollbar

Replace the default browser scrollbar with a custom themed one that
matches DevCard's brand gradient. CSS-only, no JavaScript.

- WebKit/Chromium/Safari: gradient thumb (primary -> accent), themed
  track, hover state with glow.
- Firefox: scrollbar-width thin + scrollbar-color using the same theme
  variables (solid thumb fallback since gradients aren't supported).
- Reuses existing --primary/--accent/--bg-secondary/--primary-glow
  CSS variables so light/dark mode just work.

Closes #151.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/src/app.css | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/apps/web/src/app.css b/apps/web/src/app.css
index bb09fef9..ea41de33 100644
--- a/apps/web/src/app.css
+++ b/apps/web/src/app.css
@@ -104,3 +104,39 @@ a {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px var(--primary-glow);
 }
+
+/* ---------- Custom themed scrollbar (issue #151) ---------- */
+
+/* Firefox */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: var(--primary) var(--bg-secondary);
+}
+
+/* WebKit (Chromium, Safari, Edge) */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(135deg, var(--primary), var(--accent));
+  border-radius: 999px;
+  border: 2px solid var(--bg-secondary);
+  background-clip: padding-box;
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(135deg, var(--accent), var(--primary));
+  box-shadow: 0 0 8px var(--primary-glow);
+}
+
+::-webkit-scrollbar-corner {
+  background: var(--bg-secondary);
+}