From 6b931d91392a8846b4f2bc12016d77b9aab697e3 Mon Sep 17 00:00:00 2001
From: Acbox <acbox0328@gmail.com>
Date: Sun, 26 Apr 2026 15:38:22 +0800
Subject: [PATCH] style(ui): theme-aware custom scrollbar to fix dark-mode
 contrast

Default OS scrollbars look out of place in dark mode. Introduce
--scrollbar-thumb / --scrollbar-thumb-hover tokens with translucent
black/white per theme, and apply them globally via scrollbar-color
(Firefox) and ::-webkit-scrollbar rules (WebKit) with a thin rounded
thumb on a transparent track.
---
 packages/ui/src/style.css | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/ui/src/style.css b/packages/ui/src/style.css
index 5d73d50f..75c00522 100644
--- a/packages/ui/src/style.css
+++ b/packages/ui/src/style.css
@@ -55,6 +55,8 @@
   --sidebar-accent-foreground: oklch(0.141 0.005 286.375);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.55 0.22 290);
+  --scrollbar-thumb: oklch(0 0 0 / 0.18);
+  --scrollbar-thumb-hover: oklch(0 0 0 / 0.32);
 }
 
 .dark {
@@ -90,6 +92,8 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.62 0.22 290);
+  --scrollbar-thumb: oklch(1 0 0 / 0.14);
+  --scrollbar-thumb-hover: oklch(1 0 0 / 0.26);
 }
 
 @theme inline {
@@ -138,6 +142,32 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  * {
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+    scrollbar-width: thin;
+  }
+
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  *::-webkit-scrollbar-track,
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border: 2px solid transparent;
+    border-radius: 9999px;
+    background-clip: padding-box;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover);
+  }
 }