docs: Add custom scrollbar styling to match brand theme#1165
docs: Add custom scrollbar styling to match brand theme#1165goingforstudying-ctrl wants to merge 1 commit intoVoltAgent:mainfrom
Conversation
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 VoltAgent#1157
|
📝 WalkthroughWalkthroughA new custom scrollbar stylesheet is imported into the main CSS file and defines scrollbar styling for both WebKit and Firefox browsers, with support for light and dark themes using emerald green accent colors matching the brand design system. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip CodeRabbit can approve the review once all CodeRabbit's comments are resolved.Enable the |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 2 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="website/src/css/custom.css">
<violation number="1" location="website/src/css/custom.css:1">
P2: Global brand scrollbar import is overridden by existing TOC-specific scrollbar rules, causing TOC to keep old gray styling and break theme consistency.</violation>
</file>
<file name="website/src/css/scrollbar.css">
<violation number="1" location="website/src/css/scrollbar.css:50">
P2: Dark-mode scrollbar overrides use descendant selectors and miss the root element, so viewport scrollbar colors may stay light in dark theme.</violation>
</file>
Since this is your first cubic review, here's how it works:
- cubic automatically reviews your code and comments on bugs and improvements
- Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
- Add one-off context when rerunning by tagging
@cubic-dev-aiwith guidance or docs links (includingllms.txt) - Ask questions if you need clarification on any suggestion
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| @@ -1,3 +1,4 @@ | |||
| @import "./scrollbar.css"; | |||
There was a problem hiding this comment.
P2: Global brand scrollbar import is overridden by existing TOC-specific scrollbar rules, causing TOC to keep old gray styling and break theme consistency.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At website/src/css/custom.css, line 1:
<comment>Global brand scrollbar import is overridden by existing TOC-specific scrollbar rules, causing TOC to keep old gray styling and break theme consistency.</comment>
<file context>
@@ -1,3 +1,4 @@
+@import "./scrollbar.css";
@tailwind base;
@tailwind components;
</file context>
| @@ -0,0 +1,52 @@ | |||
| /* ============================================ | |||
There was a problem hiding this comment.
P2: Dark-mode scrollbar overrides use descendant selectors and miss the root element, so viewport scrollbar colors may stay light in dark theme.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At website/src/css/scrollbar.css, line 50:
<comment>Dark-mode scrollbar overrides use descendant selectors and miss the root element, so viewport scrollbar colors may stay light in dark theme.</comment>
<file context>
@@ -0,0 +1,52 @@
+ 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);
+}
</file context>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
website/src/css/scrollbar.css (1)
20-20: Narrow transition scope tobackground-color.Line 20 uses
transition: all, but only color changes here. Limiting it improves maintainability and avoids unintended animations later.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/css/scrollbar.css` at line 20, The rule uses a broad transition declaration ("transition: all 0.2s ease;") in the scrollbar CSS; narrow it to only animate background-color to avoid unintended animations later by replacing that all-encompassing declaration with a transition that targets background-color (keep the same duration/timing). Locate the selector containing the transition line in scrollbar.css and update the declaration so only background-color is transitioned.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/css/scrollbar.css`:
- Around line 17-25: The scrollbar thumb opacity is too low for accessibility;
update the ::-webkit-scrollbar-thumb default and hover styles to higher-contrast
values (e.g., increase rgba alpha from 0.3 to around 0.6 for the default and
from 0.5 to around 0.8 for :hover) so the green thumb is more visible, and apply
the same adjustment to the other similar blocks referenced (lines covering the
alternate theme selectors around 36-42 and 45-52) — modify the CSS rules for
::-webkit-scrollbar-thumb and ::-webkit-scrollbar-thumb:hover accordingly.
---
Nitpick comments:
In `@website/src/css/scrollbar.css`:
- Line 20: The rule uses a broad transition declaration ("transition: all 0.2s
ease;") in the scrollbar CSS; narrow it to only animate background-color to
avoid unintended animations later by replacing that all-encompassing declaration
with a transition that targets background-color (keep the same duration/timing).
Locate the selector containing the transition line in scrollbar.css and update
the declaration so only background-color is transitioned.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c945272b-16f3-4a29-b7a9-89b94bb66fd2
📒 Files selected for processing (2)
website/src/css/custom.csswebsite/src/css/scrollbar.css
| ::-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); | ||
| } |
There was a problem hiding this comment.
Increase default thumb contrast to meet accessibility intent.
Current default thumb opacity is too subtle (especially Line 18 and Line 37), making the scrollbar hard to perceive in both themes. This conflicts with the PR’s accessibility objective.
🎯 Suggested contrast-safe adjustment
::-webkit-scrollbar-thumb {
- background: rgba(16, 185, 129, 0.3);
+ background: rgba(16, 185, 129, 0.55);
border-radius: 4px;
- transition: all 0.2s ease;
+ transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
- background: rgba(16, 185, 129, 0.5);
+ background: rgba(16, 185, 129, 0.75);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
- background: rgba(16, 185, 129, 0.25);
+ background: rgba(16, 185, 129, 0.5);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
- background: rgba(16, 185, 129, 0.45);
+ background: rgba(16, 185, 129, 0.7);
}
* {
scrollbar-width: thin;
- scrollbar-color: rgba(16, 185, 129, 0.3) transparent;
+ scrollbar-color: rgba(16, 185, 129, 0.55) transparent;
}
html[data-theme="dark"] * {
- scrollbar-color: rgba(16, 185, 129, 0.25) rgba(255, 255, 255, 0.05);
+ scrollbar-color: rgba(16, 185, 129, 0.5) rgba(255, 255, 255, 0.08);
}Also applies to: 36-42, 45-52
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@website/src/css/scrollbar.css` around lines 17 - 25, The scrollbar thumb
opacity is too low for accessibility; update the ::-webkit-scrollbar-thumb
default and hover styles to higher-contrast values (e.g., increase rgba alpha
from 0.3 to around 0.6 for the default and from 0.5 to around 0.8 for :hover) so
the green thumb is more visible, and apply the same adjustment to the other
similar blocks referenced (lines covering the alternate theme selectors around
36-42 and 45-52) — modify the CSS rules for ::-webkit-scrollbar-thumb and
::-webkit-scrollbar-thumb:hover accordingly.
|
@cubic-dev-ai Thanks for the detailed review! I'll address both CSS issues:
@coderabbitai Thanks for the nitpick on the transition scope - I'll narrow it to background-color only. Will push fixes shortly! |
|
Tip For best results, initiate chat on the files or code changes.
/* Before */
transition: all 0.2s ease;
/* After */
transition: background-color 0.2s ease;This ensures only the background-color animates on hover, avoiding unintended side effects from transitioning unrelated properties (e.g., width, opacity, or layout-affecting properties). Looking forward to your updated push! 🚀 |
1 participant
Summary
Implement custom scrollbar styling for the documentation website that aligns with VoltAgent's modern design system and emerald green brand color.
Problem
The documentation website currently uses default browser scrollbars that don't match the site's carefully crafted design system, creating an inconsistent user experience.
Solution
Custom Scrollbar Implementation
Visual Design:
Theme Support:
Changes
website/src/css/scrollbar.csswith custom WebKit scrollbar styleswebsite/src/css/custom.cssto import scrollbar stylesScreenshots
The scrollbar now uses VoltAgent's signature emerald green (#10b981) with:
Fixes #1157
Summary by cubic
Add custom, thin emerald scrollbars to the docs to match the brand and improve visual consistency across light and dark themes. Fixes #1157.
scrollbar-color.website/src/css/scrollbar.cssand imported it inwebsite/src/css/custom.css.Written for commit e0e41c6. Summary will update on new commits.
Summary by CodeRabbit