From ffaed120480ab976b0a3ad9d2365b95b77702b92 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 30 Jan 2026 21:09:05 +0800
Subject: [PATCH] feat(ui): add global scrollbar styling with light/dark
 support

Thin 6px scrollbars with transparent tracks and themed thumbs using
CSS standard properties + WebKit pseudo-elements for max compatibility.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 packages/ui/src/styles/globals.css | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index dd74c884..21524765 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -83,6 +83,9 @@
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.705 0.015 286.067);
+  --scrollbar-thumb: oklch(0.82 0.003 286);
+  --scrollbar-thumb-hover: oklch(0.705 0.015 286.067);
+  --scrollbar-track: transparent;
 }
 
 .dark {
@@ -117,6 +120,9 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.552 0.016 285.938);
+  --scrollbar-thumb: oklch(1 0 0 / 15%);
+  --scrollbar-thumb-hover: oklch(1 0 0 / 30%);
+  --scrollbar-track: transparent;
 }
 
 /* Shiki dual themes: CSS-only light/dark switching via CSS variables */
@@ -136,6 +142,22 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  }
+  *::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  *::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+  }
+  *::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 3px;
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
   }
   body {
     @apply bg-background text-foreground;