From e0e41c605d0a2f094aff82ed7d178333f36352cb Mon Sep 17 00:00:00 2001
From: PR-Contributor <prbot@example.com>
Date: Thu, 19 Mar 2026 22:23:10 +0000
Subject: [PATCH 1/2] docs: Add custom scrollbar styling to match brand theme

Implement custom scrollbar styling for documentation website that aligns
with VoltAgent's modern design system and emerald green brand color (#10b981).

Changes:
- Add scrollbar.css with custom WebKit scrollbar styles
- Import scrollbar styles in custom.css
- Support both light and dark themes
- Firefox scrollbar support via scrollbar-color

Design specifications:
- 8px width for modern, unobtrusive appearance
- Emerald green thumb (rgba(16, 185, 129, 0.3)) matching brand
- Rounded corners (4px border-radius)
- Smooth hover transitions
- Proper contrast for accessibility

Fixes #1157
---
 website/src/css/custom.css    |  1 +
 website/src/css/scrollbar.css | 52 +++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 website/src/css/scrollbar.css

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index a03c569da..f441fd43d 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -1,3 +1,4 @@
+@import "./scrollbar.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/website/src/css/scrollbar.css b/website/src/css/scrollbar.css
new file mode 100644
index 000000000..8a43f9273
--- /dev/null
+++ b/website/src/css/scrollbar.css
@@ -0,0 +1,52 @@
+/* ============================================
+   Custom Scrollbar Styling - VoltAgent Brand
+   Issue #1157
+   ============================================ */
+
+/* Light Mode Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(16, 185, 129, 0.3);
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(16, 185, 129, 0.5);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Dark Mode Scrollbar */
+html[data-theme="dark"] ::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+html[data-theme="dark"] ::-webkit-scrollbar-thumb {
+  background: rgba(16, 185, 129, 0.25);
+}
+
+html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+  background: rgba(16, 185, 129, 0.45);
+}
+
+/* Firefox Support */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(16, 185, 129, 0.3) transparent;
+}
+
+html[data-theme="dark"] * {
+  scrollbar-color: rgba(16, 185, 129, 0.25) rgba(255, 255, 255, 0.05);
+}
\ No newline at end of file

From 7b24a770223c0f85926a4dc762ba9914bbe2e542 Mon Sep 17 00:00:00 2001
From: PR-Contributor <prbot@example.com>
Date: Sat, 28 Mar 2026 05:01:05 +0000
Subject: [PATCH 2/2] fix: address review feedback - narrow transition scope,
 fix dark mode root scrollbar, unify TOC brand colors

---
 website/src/css/custom.css    |  8 ++++----
 website/src/css/scrollbar.css | 11 ++++++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index f441fd43d..cc8647097 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -5367,21 +5367,21 @@ nav.table-of-contents .table-of-contents__link--active,
 }
 
 .tableOfContents::-webkit-scrollbar-thumb {
-  background-color: rgba(107, 114, 128, 0.3);
+  background-color: rgba(16, 185, 129, 0.3);
   border-radius: 10px;
 }
 
 .tableOfContents::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(107, 114, 128, 0.5);
+  background-color: rgba(16, 185, 129, 0.5);
 }
 
 /* Dark mode scrollbar */
 [data-theme="dark"] .tableOfContents::-webkit-scrollbar-thumb {
-  background-color: rgba(156, 163, 175, 0.3);
+  background-color: rgba(16, 185, 129, 0.25);
 }
 
 [data-theme="dark"] .tableOfContents::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(156, 163, 175, 0.5);
+  background-color: rgba(16, 185, 129, 0.45);
 }
 
 /* Animate the active TOC item */
diff --git a/website/src/css/scrollbar.css b/website/src/css/scrollbar.css
index 8a43f9273..aabf0542d 100644
--- a/website/src/css/scrollbar.css
+++ b/website/src/css/scrollbar.css
@@ -17,7 +17,7 @@
 ::-webkit-scrollbar-thumb {
   background: rgba(16, 185, 129, 0.3);
   border-radius: 4px;
-  transition: all 0.2s ease;
+  transition: background-color 0.2s ease;
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -42,6 +42,15 @@ html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
 }
 
 /* Firefox Support */
+html {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(16, 185, 129, 0.3) transparent;
+}
+
+html[data-theme="dark"] {
+  scrollbar-color: rgba(16, 185, 129, 0.25) rgba(255, 255, 255, 0.05);
+}
+
 * {
   scrollbar-width: thin;
   scrollbar-color: rgba(16, 185, 129, 0.3) transparent;