From d6ed1f9bbc351fa0c059b6fcb2d9847cc0bc74c6 Mon Sep 17 00:00:00 2001
From: Arshit Vaghasiya <arshitvaghasiya29@gmail.com>
Date: Wed, 11 Mar 2026 02:38:37 -0400
Subject: [PATCH] ui: improve scrollbar UI with custom colors and rounded thumb
 (#983)

* ui: improve scrollbar UI with custom colors and rounded thumb

* ui: increase scrollbar thickness for better visibility

* ui: refine scrollbar styling from primary pink to text/15 color and add custom buttons for scrollbar

* tweaks

---------

Co-authored-by: CJ Pais <cj@cjpais.com>
---
 src/App.css | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/App.css b/src/App.css
index 8a8e66f..44b0589 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,7 @@
 @import "tailwindcss";
 
 @theme {
+  /* Design tokens */
   --color-text: #0f0f0f;
   --color-background: #fbfbfb;
   --color-background-ui: #da5893;
@@ -30,6 +31,13 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 
+  --scrollbar-thumb: color-mix(in srgb, var(--color-text), transparent 85%);
+  --scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--color-text),
+    transparent 70%
+  );
+
   /* Apply colors */
   color: var(--color-text);
   background-color: var(--color-background);
@@ -54,6 +62,30 @@
   }
 }
 
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 20px;
+  border: 3px solid transparent;
+  border-right-width: 4px;
+  border-left-width: 3px;
+  background-clip: content-box;
+  min-height: 32px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--scrollbar-thumb-hover);
+}
+
 @layer utilities {
   .text-stroke {
     -webkit-text-stroke: 2px var(--color-text-stroke);